Maneira correta de integrar plugins jQuery no AngularJS

217

Eu queria saber qual é a maneira correta de integrar plugins jQuery no meu aplicativo angular. Encontrei vários tutoriais e transmissões de tela, mas eles parecem atendidos em um plug-in específico.

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

Devo criar uma diretiva assim -

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

E então no html chama o script e a diretiva?

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

Graças à frente

jquery-plugins angularjs

— Gidon
fonte

Sim, a melhor abordagem é envolver os plugins jQuery necessários dentro de uma diretiva, para que você obtenha o benefício das variáveis de escopo e controle a chamada de inicialização / método.

— Bhaskara Kempaiah

Eu não sei como me sinto sobre eval em qualquer circunstância ... ouviu apenas a sua má prática

— sksallaj

Deve estar $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));sem as aspas.

— Maxim Zubarev

Respostas:

143

Sim você está correto. Se você estiver usando um plug-in jQuery, não coloque o código no controlador. Em vez disso, crie uma diretiva e coloque o código que você normalmente teria dentro da linkfunção da diretiva.

Existem alguns pontos na documentação que você pode dar uma olhada. Você pode encontrá-los aqui:
Armadilhas comuns

Usando controladores corretamente

Certifique-se de que ao referenciar o script em sua exibição, você o refira por último - depois que a biblioteca angularjs, controladores, serviços e filtros forem referenciados.

EDIT: Ao invés de usar $(element), você pode usar angular.element(element)quando usar AngularJS com jQuery

— callmekatootie
fonte

E os parâmetros dos plugins jQuery que permitem conteúdo HTML? (por exemplo, se eu quiser adicionar uma ng-clickdirectiva através deste texto simples HTML parâmetro)

— Fractaliste

@Fractaliste Não sei o que você quer dizer. Você pode dar um exemplo?

— precisa saber é o seguinte

você pode explicar o que exatamente faz todo $ (elemento). 'pluginActivationFunction' (scope. $ eval (attrs.directiveName)); significa ?

— Gaurav_soni

Eu sou quase um novato total de angularjs. Eu tentei usar vários plugins jquery e nenhum deles funcionou. Nós realmente precisamos fazer isso? Eles não podem simplesmente trabalhar junto com angularjs? Parece tão bom para mim.

— Moebius 14/05

Por que o script precisa vir por último?

— Mike R

Já tenho duas situações em que diretivas e serviços / fábricas não foram bem-sucedidos.

o cenário é que eu tenho (tinha) uma diretiva que possui injeção de dependência de um serviço e, a partir da diretiva, peço ao serviço que faça uma chamada ajax (com $ http).

no final, em ambos os casos, o ng-Repeat não apresentou nenhum arquivo, mesmo quando dei um valor inicial à matriz.

eu até tentei fazer uma diretiva com um controlador e um escopo isolado

somente quando mudei tudo para um controlador e funcionou como mágica.

exemplo sobre isso aqui Inicializando o plugin jQuery (RoyalSlider) no Angular JS

— bresleveloper
fonte