0

I am using a Jquery image browsing plugin, inside an angularjs website.

The content is initialized after the page is done loading.

$scope.$on('$viewContentLoaded', function() {..

And within the callback function , i am also loading the control-panel for image manipulations.Which is separate from browser-plugin.

Everything from this point needs to continue as AngularJs , but ng-include doesn't work. I cannot see any html being loaded.

$(".imageBrowserPlugin").append("<div id='imageControlPanel' ><div ng-controller='imageController'  ng-include=''templates/image-controller.html''> </div></div>");

How can i accomplish this or how can i late-bind the content back to angular js ?

miensol
  • 39,733
  • 7
  • 116
  • 112
Eyyildiz
  • 13
  • 1
  • 6
  • IMO there are too many posts of people complaining that the "upgrade" or "augmentation" of their jQuery apps with Angular isn't working as expected. Often, the solution is : stop using jQuery. Don't load jQuery in an Angular app. Use Angular. In this case, don't append stuff with jQuery. Unload jQuery and use ng-repeat instead to generate your markup. – Jeremy Thille Jun 08 '15 at 13:38
  • `ng-include` is a _directive_. Directives need to be parsed by AngularJS in order to actually work (the last step in "work" is running the code in the `link` function for example). AngularJS does not "listen" for changes you directly make in your DOM. That would be "magic", something to be avoided. That's the main reason people keep telling other people to stop using jQuery and AngularJS together like that. – Sergiu Paraschiv Jun 08 '15 at 13:42
  • You are right , http://stackoverflow.com/users/1021703/jeremy-thille in this case i couldnt find a comparable image-browser plugin , and now i need to add image-manipulations panel to it. Maybe i should finish the Jquery fork with more jquery and contain this as is. As for the ng-repeat, I am not generating a markup , just some controls to manipulate the image-css's , hopefully via ng-model , controllers etc. – Eyyildiz Jun 08 '15 at 13:43
  • I'm guessing you are appending stuff inside an AngularJS context (a directive or a controller). You can "tell" AngularJS to parse that piece of DOM using `$compile`: https://docs.angularjs.org/api/ng/service/$compile – Sergiu Paraschiv Jun 08 '15 at 13:44
  • possible duplicate of [AngularJS + JQuery : How to get dynamic content working in angularjs](http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs) – Sergiu Paraschiv Jun 08 '15 at 13:45
  • sergiu-paraschiv Can i not simply complile the dynamically-loaded part , bind it back to angularjs and make it load the ng-include page ? – Eyyildiz Jun 08 '15 at 13:45
  • That's exactly what I'm saying. Read the answer on the duplicate for some code samples. – Sergiu Paraschiv Jun 08 '15 at 13:45
  • Sergiu Paraschiv Actually i have tried $compile but it still didnt work. most likely some typo , ill give it a shot again , thanks ! – Eyyildiz Jun 08 '15 at 13:47

0 Answers0