Prawidłowy sposób integracji wtyczek jQuery z AngularJS

217

Zastanawiałem się, jaki jest właściwy sposób integracji wtyczek jQuery z moją aplikacją kątową. Znalazłem kilka samouczków i rzutów ekranowych, ale wydają się one dostosowane do konkretnej wtyczki.

Na przykład: http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwLzFYs

Czy powinienem stworzyć taką dyrektywę -

App.directive('directiveName', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
        }
    };
});

A następnie w html wywołać skrypt i dyrektywę?

<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>

Dzięki z góry

jquery-plugins angularjs

— Gidon
źródło

tak, najlepszym rozwiązaniem jest zawinięcie wymaganych wtyczek jQuery w dyrektywę, aby uzyskać korzyści ze zmiennych zakresu i kontrolować inicjalizację / wywołanie metody.

— Bhaskara Kempaiah

Nie wiem, co sądzę o ewaluacji w żadnych okolicznościach ... słyszałem jej po prostu złą praktykę

— sksallaj,

Powinno być $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));bez cytatów.

— Maxim Zubarev

Odpowiedzi:

143

Tak, masz rację. Jeśli używasz wtyczki jQuery, nie umieszczaj kodu w kontrolerze. Zamiast tego utwórz dyrektywę i umieść kod, który normalnie posiadasz w linkfunkcji dyrektywy.

Dokumentacja zawiera kilka punktów, na które można spojrzeć. Można je znaleźć tutaj:
Typowe pułapki

Prawidłowe używanie kontrolerów

Upewnij się, że kiedy odwołujesz się do skryptu w swoim widoku, odwołujesz się do niego na końcu - po odwołaniu do biblioteki angularjs, kontrolerów, usług i filtrów.

EDYCJA: Zamiast używać $(element), możesz skorzystać z angular.element(element)AngularJS z jQuery

— callmekatootie
źródło

A co z parametrami wtyczek jQuery, które zezwalają na zawartość HTML? (na przykład, jeśli chcę dodać ng-clickdyrektywę za pomocą tego parametru HTML w postaci zwykłego tekstu)

— Fractaliste,

@Fractaliste Nie jestem pewien, co masz na myśli. Czy możesz podać przykład?

— callmekatootie

czy możesz wyjaśnić, co dokładnie robi wszystkie $ (element). 'pluginActivationFunction' (scope. $ eval (attrs.directiveName)); znaczy ?

— Gaurav_soni

Jestem prawie całkowitym nowicjuszem angularjs. Próbowałem użyć kilku wtyczek jquery i żadna z nich nie działała. Czy naprawdę musimy to zrobić? Czy nie mogą po prostu współpracować z angularjs? To brzmi dla mnie tak bardzo.

— Moebius

Dlaczego skrypt musi być ostatni?

— Mike R

Mam już 2 sytuacje, w których dyrektywy i usługi / fabryki nie grały dobrze.

scenariusz jest taki, że mam (miałem) dyrektywę, która ma wstrzykiwanie zależności usługi, a na podstawie tej dyrektywy proszę usługę o wywołanie ajax (za pomocą $ http).

w końcu w obu przypadkach ng-Repeat w ogóle nie zapisał pliku, nawet gdy podałem tablicy wartość początkową.

Próbowałem nawet stworzyć dyrektywę z kontrolerem i izolowanym zakresem

tylko kiedy przeniosłem wszystko do kontrolera i działało to jak magia.

przykład na ten temat tutaj Inicjalizacja wtyczki jQuery (RoyalSlider) w Angular JS

— bresleveloper
źródło