Javascript 用于ElevateToom jQuery插件的AngularJS指令_Javascript_Jquery_Angularjs_Angularjs Directive

Javascript 用于ElevateToom jQuery插件的AngularJS指令

javascript jquery angularjs

Javascript 用于ElevateToom jQuery插件的AngularJS指令,javascript,jquery,angularjs,angularjs-directive,Javascript,Jquery,Angularjs,Angularjs Directive,我正在尝试在angular应用程序中使用jQuery插件基本上，要正常使用ElevateToom，请按如下方式创建图像： <img id="my-img" src="small.jpg" data-zoom-image="big.jpg" /> 这在标准应用程序中运行良好。但当我尝试在AngularJS应用程序中使用指令（我遵循了一些让jquery插件进入AngularWith指令的SO答案）时，我就是无法让它工作 Plunkr上的实时可编辑演示：我的指令如下： app.dir

我正在尝试在angular应用程序中使用jQuery插件

基本上，要正常使用ElevateToom，请按如下方式创建图像：

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

这在标准应用程序中运行良好。但当我尝试在AngularJS应用程序中使用指令（我遵循了一些让jquery插件进入AngularWith指令的SO答案）时，我就是无法让它工作

Plunkr上的实时可编辑演示：

我的指令如下：

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做了几天的实验，所以对我放松点；）

您的指令：

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

请记住，

compile

函数（tElement、tAttrs、transclude）{…}没有访问范围的权限，因此我猜您正在尝试使用

链接

函数

检查

我做了一些改变：

HTML

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

当直接使用

数据缩放图像='{large_image}}}'

时，导致ElevateToom尝试从该属性获取值，并且在运行插件

$（元素）.elevateToom（）时它是'{large_image}}'

检查更新的

已更新
由于可能存在插件所需的attr被延迟的情况，因此您需要调用attr，并且只有当它实际就绪时，您才调用插件
app.directive('ngElevateZoom', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      // Watch for changes on the attribute before
      // calling the function.
      attrs.$observe('zoomImage', function() {
        linkElevateZoom();
      });

      function linkElevateZoom() {
        // Check that it's not empty.
        if (!attrs.zoomImage) return;
        element.attr('data-zoom-image',attrs.zoomImage);
        $(element).elevateZoom();
      }

      linkElevateZoom();
    }
  };
});

检查更新的
可选
当与视图结合使用时，插件会在视图顶部留下一个分层的div。这里有一个解决这个问题的指令
app.directive('zoomContainer', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$on('$routeChangeSuccess', function() {
                var target = element.children('div.zoomContainer').remove();
            });
        }
    };
});

此指令需要应用于body元素
<body zoom-container>


太好了。谢谢你！好的，事实上，我似乎对上面的内容有点小问题。当我将URL存储在$scope.data={large:…，small:…}中并在加载数据后分配它们时，该指令似乎不再有效：（.我已经在上对它进行了模拟，如果您能看到您的解决方案是否可以更改以处理此问题，那将是一件令人惊讶的事情？我已经测试过，似乎该指令使用未定义的数据对象初始化，因此需要重新初始化或其他什么？我从查看so和Angular docs中感觉到，我可能需要使用Resolution/Promissions做一些事情，但是我不确定这是如何应用的，也不知道如何正确地实施，这样才能更好地发挥我的指导作用。我认为最好是发布新问题，因为这是关于其他问题的。发布链接，我可以查看it@PeterHamilton我更新了答案和你的新装备，应该对你有帮助。干杯
app.directive('zoomContainer', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$on('$routeChangeSuccess', function() {
                var target = element.children('div.zoomContainer').remove();
            });
        }
    };
});

<body zoom-container>