Ich habe mich gefragt, wie ich jQuery-Plugins richtig in meine eckige App integrieren kann. Ich habe mehrere Tutorials und Screencasts gefunden, aber sie scheinen auf ein bestimmtes Plugin zugeschnitten zu sein.
Zum Beispiel: http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwLzFYs
Soll ich eine solche Richtlinie erstellen -
App.directive('directiveName', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
}
};
});
Und dann im HTML das Skript und die Direktive aufrufen?
<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>
Vielen Dank voraus
jquery-plugins
angularjs
Gidon
quelle
quelle
$(element).pluginActivationFunction(scope.$eval(attrs.directiveName));
ohne die Anführungszeichen sein.Antworten:
Ja du hast Recht. Wenn Sie ein jQuery-Plugin verwenden, geben Sie den Code nicht in den Controller ein. Erstellen Sie stattdessen eine Direktive und fügen Sie den Code, den Sie normalerweise haben würden, in die
link
Funktion der Direktive ein.In der Dokumentation gibt es einige Punkte, die Sie sich ansehen können. Sie finden sie hier:
Häufige Fallstricke
Steuerungen richtig verwenden
Stellen Sie sicher, dass Sie das Skript, wenn Sie in Ihrer Ansicht auf es verweisen, zuletzt referenzieren - nachdem auf die AngularJS-Bibliothek, Controller, Dienste und Filter verwiesen wurde.
BEARBEITEN: Anstatt zu verwenden
$(element)
, können Sieangular.element(element)
AngularJS mit jQuery verwendenquelle
ng-click
Direktive über diesenIch habe bereits 2 Situationen, in denen Richtlinien und Dienstleistungen / Fabriken nicht gut gespielt haben.
Das Szenario ist, dass ich eine Direktive habe (hatte), die eine Abhängigkeitsinjektion eines Dienstes hat, und von der Direktive fordere ich den Dienst auf, einen Ajax-Aufruf (mit $ http) zu tätigen.
Am Ende wurde in beiden Fällen die ng-Wiederholung überhaupt nicht gespeichert, selbst wenn ich dem Array einen Anfangswert gab.
Ich habe sogar versucht, eine Direktive mit einem Controller und einem isolierten Bereich zu erstellen
Nur wenn ich alles auf einen Controller verschoben habe und es wie Magie funktioniert hat.
Beispiel hierzu Initialisieren des jQuery-Plugins (RoyalSlider) in Angular JS
quelle