Richtige Methode zur Integration von jQuery-Plugins in AngularJS

217

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

Ja, der beste Ansatz besteht darin, die erforderlichen jQuery-Plugins in eine Direktive zu packen, damit Sie die Vorteile von Bereichsvariablen nutzen und den Aufruf der Initialisierung / Methode steuern können.

— Bhaskara Kempaiah

Ich weiß nicht, wie ich mich unter allen Umständen über Eval fühle ... hörte seine schlechte Praxis

— sksallaj

Es sollte $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));ohne die Anführungszeichen sein.

— Maxim Zubarev

Antworten:

143

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 linkFunktion 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 Sie angular.element(element)AngularJS mit jQuery verwenden

— callmekatootie
quelle

Wie wäre es mit den Parametern der jQuery-Plugins, die HTML-Inhalte zulassen? (Zum Beispiel, wenn ich eine ng-clickDirektive über diesen

— Nur-

@Fractaliste Nicht sicher, was du meinst. Kannst du ein Beispiel geben?

— Callmekatootie

Können Sie erklären, was genau alles $ (Element) macht? 'pluginActivationFunction' (scope. $ eval (attrs.directiveName)); meint ?

— Gaurav_soni

Ich bin fast ein Neuling in Angularjs. Ich habe versucht, mehrere JQuery-Plugins zu verwenden, aber keines davon hat funktioniert. Müssen wir das wirklich tun? Können sie nicht einfach an eckigen Stellen arbeiten? Es klingt für mich so boilerplate.

— Möbius

Warum muss das Skript zuletzt kommen?

— Mike R

Ich 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

— Bresleveloper
quelle