How to use data-image and data-zoom-image attributes in angularjs

Question

I need to add elevateZoom image slider to my Angular application. Following is my html code.

<img id="zoom_03"
 ng-src='{{galaryImages[0].w320}}'
 data-zoom-image='{{galaryImages[0].original}}'/>

Here

{{galaryImages[0].original}}

and

{{galaryImages[0].w320}}

is being loading dynamically using Ajax call from controller. ng-src is working successfully. but since i have used data-zoom-image as larger image it is executing before controller fetch the results because of that elevateZoom script is not working properly because zoom-image is assign to angular expression which is {{galaryImages[0].original}}. What is the solution to overcome this issue? are there any way to handle attributes like data-zoom-image as angular handling ng-src? or any other solution.

Thanks

Answer 1

Without knowing what elevateZoom is really, I can suggest you do either 1 of 2 things. The first is create a custom directive to handle this. The second is use ng-attr.

With ng-attr, you can do something like

  ng-attr-ng-src='{{galaryImages[0].w320}}'
  ng-attr-data-zoom-image='{{galaryImages[0].original}}'

I'm not sure how elevateZoom, if it's just taking a snapshot of your variables, then you will have to do something else. If it's built for angular and binds to the variables, then it should work.

If you want it to wait, you can do soethimng like toggling a boolean like

<img id="zoom_03" ng-if="isLoaded"

Where you set is loaded to false by default, then when your ajax call is done you set it to true

 .complete(function() {
   //apply your logic
   $scope.isLoaded = true;

ng-if will take it off the dom completely, and will evaluate when you bring it back on by setting isLoaded to true.

Note: either way you do this I still recommend you bring this into an angular directive, it looks like this is a jquery plug in. The best thing to do is to put it in a directive and apply the logic through the directive, or find one already built for angular. You will find it very difficult to use jquery logic into angular if you don't have a directive. For instance this plug in might be firing on document.ready to look for the custom vars, in which case the ng-if wont work.