2016-07-22 12 views
0

Ok erscheint, bin ich ein wenig ... von diesem Plugin verwirrt .. habe ich das Skript am Ende des Körpersjquery.appear Plugin funktioniert nicht, wenn das Element

<body> 
    <div id="first"> 
      //a lot of text 
    </div> 
    <div id="second"> 
     //more text 
    </div> 
    <div id="leo"> 
     //here is where the plugin should work 
    </div> 
</body> 
<script src="js/jquery.appear.js"></script> 
</html> 

das, was ist ich habe in den js

app.controller('comparativaCtrl', function ($scope, $rootScope, $routeParams, $location, $http, Data) 
{ 
    $('#leo').appear(); 
     $(document.body).on("appear", "#leo", function() { 
     alert("al fin"); 
    }); 
}); 

jedoch Datei, passiert nichts ... ich habe und ich habe jquery, und außerdem ist es, diese Abhängigkeiten nicht so weit erforderlich, wie ich weiß .... Beachten sie, dass die App .controller wird verwendet, weil mein Js-Code in der Steuerung eines Teils ist (ich verwende Angular). Wenn jemand eine Idee davon hat, warum das nicht funktioniert, lass es mich wissen

+0

Sie sollten eine Wrapper-Richtlinie erstellen das Plugin verwenden – Satpal

Antwort

0

Sie sollten immer die DOM-Manipulation in einer Direktive tun, Hier ist ein Beispiel, um es zu erstellen und zu verwenden.

app.directive('appearWrapper', [ 
    function() { 
     return { 
      restrict: "A", 
      link: function(scope, element, attrs) { 
       $(element) 
        .appear() 
        .on('appear', function() { 
         //Do the needful 
        }); 

      } 
     }; 
    } 
]); 

Nutzungs

<div appear-wrapper> 
    //here is where the plugin should work 
</div> 

Ein guter Artikel jQuery Plugin in an Angular App und "Thinking in AngularJS" if I have a jQuery background?

1

eine neue directives.js erstellen und alle Ihre Jquery Funktion dort hinzuzufügen. Geben Sie in Ihrer .cshtml-Datei einfach den Namen der Direktive an. Ex: customdirective.js

angular.module('directiveName', []).directive('appear', ['$window', function ($window) { 
    return function (scope, element, attr) { 
     var wndw = angular.element($window); 
     scope.initAppear = function() { 
//your code 
    } 
}]); 

Flower.cshtml:

<body> 
    <div id="first"> 
      //a lot of text 
    </div> 
    <div id="second"> 
     //more text 
    </div> 
    <div id="leo" appear> 
     //here is where the plugin should work 
    </div> 
</body> 
</html>