1

I'm trying to run a JS plugin in an Angular app. So I have two files: index.html and view.html (the template). The latter is the partial loaded in the ng-app DIV inside index.html.

Now, jQuery and the plugin are declared in index.html. Since the implementation in view.html (the template) is, technically, dynamically generated by Angular, the declarations can't "see" it, even if they are using .on() method. I believe the problem is somehow related with JavaScript not being able to see dynamically generated content.

Trying to get some suggestions here on how to make it work. Tried moving the script declarations in the partial (i.e., view.html) but to no avail.

Kee
  • 63
  • 3
  • 9
  • 2
    See [How do I “think in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background). Then go through the [Noob Handbook](https://github.com/angular/angular.js/wiki/Noob-Handbook) for some gotchas, and bookmark [UI Bootstrap](http://angular-ui.github.com/bootstrap/) and [Angular Strap](http://mgcrea.github.com/angular-strap/) for a reference in how to use jQuery plugins with in Angular. – Stewie Mar 13 '13 at 09:04

1 Answers1

1

Integrating jquery (or any other plugins) with angular requires you to think differently. Especially when dealing with two-way data binding. If a jquery plugin changes an angular model, you need to notify the model's scope by using $scope.apply() (see angular doc).

Angular recommended practice is for DOM manipulation and use of jquery plugins to be wrapped in angular directives. It is fine to have jquery plugins as part of an angular app without integrating - however if you are touching the same stuff that can be precarious. Writing wrapper directives can be challenging for the beginner. I would recommend you look at something like the 'jq' directive in angular ui (i am a team member) to either use it out of the box or give you ideas on how to wrap your plugin. There are a number of both simple and complex directives on this site.

If you provided an example (plunker or jsfiddle) people would be able to assist better.

hope this helps

Dan Doyon
  • 6,710
  • 2
  • 31
  • 40