я пытаюсь использоватьElevateZoom JQuery плагин внутри углового приложения.

По сути, чтобы использовать ElevateZoom нормально, вы создаете изображение следующим образом:

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

Тогда в вашем приложении JS:

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

Это прекрасно работает в стандартном приложении. Но когда я пытаюсь сделать это в своем приложении AngularJS, используя директиву (я следовал некоторым SO-ответам для получения плагинов jquery в angular с директивами), я просто могу 'заставить его работать.

Живая редактируемая демонстрация на Plunkr:http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=preview

Моя директива выглядит так:

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

И мой HTML выглядит так:

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

Что я делаю неправильно? Я'Я экспериментировал с Angular всего несколько дней, так что будь осторожен со мной;)