Правильный способ интеграции плагинов 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>

Спасибо вперед

Гидон
источник
4
да, лучший подход - обернуть требуемый плагин jQuery в директиву, чтобы вы получили преимущество от переменных области видимости и управляли вызовом инициализации / метода.
Бхаскара Кемпая
Я не знаю, что я чувствую к eval при любых обстоятельствах ... слышал, что это просто плохая практика
sksallaj
1
Это должно быть $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));без кавычек.
Максим Зубарев

Ответы:

143

Да вы правы. Если вы используете плагин jQuery, не помещайте код в контроллер. Вместо этого создайте директиву и поместите код, который вы обычно имеете внутри linkфункции директивы.

В документации есть пара моментов, на которые вы могли бы взглянуть. Вы можете найти их здесь:
Общие ловушки

Правильное использование контроллеров

Убедитесь, что когда вы ссылаетесь на скрипт в своем представлении, вы ссылаетесь на него в последний раз - после ссылки на библиотеку angularjs, контроллеры, сервисы и фильтры.

РЕДАКТИРОВАТЬ: Вместо того, чтобы использовать $(element), вы можете использовать angular.element(element)при использовании AngularJS с jQuery

callmekatootie
источник
1
Как насчет параметров плагинов jQuery, которые позволяют контент HTML? (например, если я хочу добавить ng-clickдирективу через этот текстовый параметр HTML)
Fractaliste
1
@Fractaliste Не уверен, что вы имеете в виду. Можете привести пример?
callmekatootie
Можете ли вы объяснить, что именно делает все $ (element). 'pluginActivationFunction' (scope. $ eval (attrs.directiveName)); средства ?
Gaurav_soni
Я почти полный новичок angularjs. Я пытался использовать несколько плагинов jquery, и ни один из них не работал. Нам действительно нужно это сделать? Разве они не могут просто работать вместе с angularjs? Это звучит так шаблонно для меня.
Мебиус
Почему сценарий должен быть последним?
Майк Р
0

У меня уже есть две ситуации, когда директивы и службы / фабрики не играли хорошо.

Сценарий состоит в том, что у меня есть (была) директива, в которую вставляется зависимость службы, и из этой директивы я прошу службу сделать вызов ajax (с $ http).

в конце концов, в обоих случаях ng-Repeat вообще не регистрировался, даже когда я дал массиву начальное значение.

я даже пытался сделать директиву с контроллером и изолированной областью

только когда я переместил все на контроллер, и он работал как по волшебству.

пример об этом здесь Инициализация плагина jQuery (RoyalSlider) в Angular JS

bresleveloper
источник