Diretiva AngularJS para o plug-in ElevateZoom jQuery
Estou tentando usar oElevateZoom plugin jQuery dentro de um aplicativo angular.
Essencialmente, para usar o ElevateZoom normalmente, você cria uma imagem da seguinte maneira:
<img id="my-img" src="small.jpg" data-zoom-image="big.jpg" />
Em seguida, no seu aplicativo JS:
$('#my-img').elevateZoom(options);
Isso funciona bem em um aplicativo padrão. Mas quando tento fazê-lo no meu aplicativo AngularJS usando uma diretiva (segui algumas respostas SO para obter plug-ins de jquery em angular com diretivas), simplesmente não consigo fazê-lo funcionar.
Demonstração editável ao vivo no Plunkr:http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=preview
Minha diretiva se parece com:
app.directive('ngElevateZoom', function() {
return {
restrict: 'A',
scope: true,
compile: function(scope, element, attrs) {
$(element).elevateZoom(scope.$eval(attrs.elevateZoom));
}
};
});
E meu HTML fica assim:
<img ng-elevate-zoom ng-src="{{small_image}}" data-zoom-image="{{large_image}}" />
O que estou fazendo errado? Eu só estou experimentando o Angular há alguns dias, então vá com calma;)