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


4
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

1
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


1
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

1
@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

0

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.