Ich versuche das zu benutzenElevateZoom jQuery-Plugin in einer eckigen App.

Um ElevateZoom normal zu verwenden, erstellen Sie im Wesentlichen ein Bild wie folgt:

<img id="my-img" src="small.jpg" data-zoom-image="big.jpg" />

Dann in Ihrer Bewerbung JS:

$('#my-img').elevateZoom(options);

Dies funktioniert gut in einer Standard-App. Aber wenn ich es mit einer Direktive in meiner AngularJS-App versuche (ich habe einige SO-Antworten befolgt, um JQuery-Plugins mit Direktiven in Angular zu bringen), kann ich es einfach nicht zum Laufen bringen.

Live editierbare Demo auf Plunkr:http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=preview

Meine Anweisung sieht so aus:

app.directive('ngElevateZoom', function() {
  return {
    restrict: 'A',
    scope: true,
    compile: function(scope, element, attrs) {
      $(element).elevateZoom(scope.$eval(attrs.elevateZoom));
    }
  };
});

Und mein HTML sieht so aus:

<img ng-elevate-zoom ng-src="{{small_image}}" data-zoom-image="{{large_image}}" />

Was mache ich falsch? Ich habe nur ein paar Tage mit Angular experimentiert.