Правильний спосіб інтеграції jQuery плагінів у AngularJS

217

Мені було цікаво, що це правильний спосіб інтегрувати плагіни jQuery в моє кутове додаток. Я знайшов декілька навчальних посібників та екраністів, але вони, здається, задоволені певним плагіном.

Наприклад: http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwLzFYs

Чи слід створити таку директиву, як -

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

А потім у html виклик скрипту та директиви?

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

Дякую вперед

jquery-plugins angularjs

— Ґідон
джерело

так, найкращим підходом є обгортання необхідного плагіну jQuery всередині директиви, щоб ви отримали перевагу змінних областей та контролювали виклик ініціалізації / методу.

— Bhaskara Kempaiah

Я не знаю, як я

— ставлюсь

Це повинно бути $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));без лапок.

— Максим Зубарев

Відповіді:

143

Так, ви праві. Якщо ви використовуєте плагін jQuery, не ставте код у контролер. Замість цього створіть директиву та покладіть код, який ви, як правило, матимете всередині linkфункції директиви.

У документації є декілька пунктів, які ви могли поглянути. Ви можете знайти їх тут:
Загальні підводні камені

Правильне використання контролерів

Переконайтеся, що, коли ви посилаєтесь на скрипт у своєму поданні, ви посилаєте його останньою - після посилання на бібліотеку angularjs, контролери, служби та фільтри.

РЕДАКТУВАННЯ: Замість використання $(element)ви можете скористатися, angular.element(element)коли використовуєте AngularJS з jQuery

— callmekatootie
джерело

Як щодо параметрів плагінів jQuery, які дозволяють вміст HTML? (наприклад, якщо я хочу додати ng-clickдирективу через цей звичайний текстовий параметр HTML)

— Fractaliste

@Fractaliste Не впевнений, що ти маєш на увазі. Чи можете ви навести приклад?

— callmekatootie

Ви можете пояснити, що саме робить все $ (елемент). 'pluginActivationFunction' (область. $ eval (attrs.directiveName)); засоби ?

— Gaurav_soni

Я майже тотальний новачок з angularjs. Я спробував використати кілька плагінів jquery, і жоден з них не працював. Чи нам справді потрібно це робити? Чи не можуть вони просто працювати уздовж кутів? Мені це звучить так, як котельня.

— Мебіус

Чому сценарій повинен бути останнім?

— Майк R

У мене є 2 ситуації, коли директиви та послуги / фабрики не грають добре.

сценарій полягає в тому, що у мене є (була) директива, яка має введення залежності служби, а з директиви я прошу службу здійснити виклик ajax (з $ http).

врешті-решт, в обох випадках ng-Repeat взагалі не подав файл, навіть коли я дав масиву початкове значення.

Я навіть намагався скласти директиву з контролером та ізольованою областю

тільки коли я перемістив все на контролер, і це працювало як магія.

Приклад про це тут Ініціалізація плагіна jQuery (RoyalSlider) у Angular JS

— bresleveloper
джерело