Правильный способ интеграции плагинов 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 в директиву, чтобы вы получили преимущество от переменных области видимости и управляли вызовом инициализации / метода.

— Бхаскара Кемпая

Я не знаю, что я чувствую к eval при любых обстоятельствах ... слышал, что это просто плохая практика

— sksallaj

Это должно быть $(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

Можете ли вы объяснить, что именно делает все $ (element). 'pluginActivationFunction' (scope. $ eval (attrs.directiveName)); средства ?

— Gaurav_soni

Я почти полный новичок angularjs. Я пытался использовать несколько плагинов jquery, и ни один из них не работал. Нам действительно нужно это сделать? Разве они не могут просто работать вместе с angularjs? Это звучит так шаблонно для меня.

— Мебиус

Почему сценарий должен быть последним?

— Майк Р

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

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

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

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

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

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

— bresleveloper
источник