CODEWITHSUNDEEP
jquery-pluginsangularjs
rustemtopcu
rustemtopcu

Reputation: 29

jQuery doesn't work in AngularJS ng-view properly

I want to add multizoom.js in my AngularJS project.

This is my index page:

 <body>
   <img id="zoom" ng-src="example.jpg" class="example ng-class">
   <div ng-view> </div>
 </body>

and this is detail page:

<img id="zoom" ng-src="example.jpg" class="example ng-class">

My problem is jQuery multizoom plugin doesn't zoom image which is in AngularJS's ng-view part.

If image is not in ng-view part multizoom works fine.

Upvotes: 1

Views: 1721

Answers (1)

GregL
GregL

Reputation: 38131

This is because I presume you are initialising the multizoom behaviour on the DOM ready event, using $(function() { /* ...(multizoom init code)... */ }); or $(document).ready(function() { /* ...(multizoom init code)... */. If so, that will only be run once, and likely before the details page is loaded into the <div ng-view></div>. As a consequence, it will not be able to find the image on that page it is searching for as it hasn't been loaded in yet.

Instead, what you need to do is initialise your multizoom functionality whenever the ng-view content is loaded, using the event that is emitted, like so:

// (inside some function with $rootScope available)
$rootScope.$on('$viewContentLoaded', function() {
    // ... (multiview init code here) ...
});

Does that make sense?

As a small side note, don't have multiple elements with the same ID, it's not a good idea. Instead, use a class to signify the images you want to apply the multizoom plugin to.

Upvotes: 3

Related Questions