Correct way to integrate jQuery plugins in AngularJS

Question

I was wondering what is the correct way to integrate jQuery plugins into my angular app  I ve found several tutorials and screen-casts but they seem catered to a specific plugin   For Example  http   amitgharat wordpress com 2013 02 03 an-approach-to-use-jquery-plugins-with-angularjs  http   www youtube com watch v 8ozyXwLzFYs  Should I create a directive like so -   App directive  directiveName   function         return           restrict   A           link  function scope  element  attrs                  element   pluginActivationFunction  scope  eval attrs directiveName                            And then in the html call the script and the directive    lt div directiveName  gt  lt  div gt   lt script type  text javascript  src  pluginName js  gt  lt  script gt    Thanks ahead

User · Answer

i have alreay 2 situations where directives and services/factories didnt play well.

the scenario is that i have (had) a directive that has dependency injection of a service, and from the directive i ask the service to make an ajax call (with $http).

in the end, in both cases the ng-Repeat did not file at all, even when i gave the array an initial value.

i even tried to make a directive with a controller and an isolated-scope

only when i moved everything to a controller and it worked like magic.

example about this here Initialising jQuery plugin (RoyalSlider) in Angular JS

User · Answer

Yes  you are correct  If you are using a jQuery plugin  do not put the code in the controller  Instead create a directive and put the code that you would normally have inside the link function of the directive     There are a couple of points in the documentation that you could take a look at  You can find them here  Common Pitfalls    Using controllers correctly  Ensure that when you are referencing the script in your view  you refer it last - after the angularjs library  controllers  services and filters are referenced   EDIT  Rather than using   element   you can make use of angular element element  when using AngularJS with jQuery

[jquery-plugins] Correct way to integrate jQuery plugins in AngularJS

Examples related to jquery-plugins

Examples related to angularjs