Question

我正在为AngularJs制作一个自定义指令，它有一个基于我写的Jquery插件的图像旋转器which can be seen here

这是我的指示

.directive('imageRotator', function () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attr) {
            console.log('Before Function');
            $element.j360();
            console.log('After Function');
        }
    };
});

现在，当我在演示中硬编码一系列图像时该指令有效，但是当我尝试通过组合和ng-repeat使图像动态化时，该插件不起作用。我在使用动态HTML时使用$compile阅读了here，如下所示：

<div class="product" image-Rotator>
    <img ng-repeat="img in page.imgs" class="child" ng-src="img/{{product.sku}}/{{img}}.png">
</div>

但是当我使用$compile时，我的控制台出现错误：

TypeError: undefined is not a function
    at link (http://0.0.0.0:8000/js/controllers.js:48:14)
    at nodeLinkFn (http://0.0.0.0:8000/js/angular/angular.js:6220:13)
    at compositeLinkFn (http://0.0.0.0:8000/js/angular/angular.js:5630:15)
    at compositeLinkFn (http://0.0.0.0:8000/js/angular/angular.js:5633:13)
    at publicLinkFn (http://0.0.0.0:8000/js/angular/angular.js:5535:30)
    at boundTranscludeFn (http://0.0.0.0:8000/js/angular/angular.js:5649:21)
    at controllersBoundTransclude [as $transclude] (http://0.0.0.0:8000/js/angular/angular.js:6241:18)
    at ngDirective.link (http://0.0.0.0:8000/js/angular/angular.js:19898:16)
    at nodeLinkFn (http://0.0.0.0:8000/js/angular/angular.js:6220:13)
    at compositeLinkFn (http://0.0.0.0:8000/js/angular/angular.js:5630:15) <div class="product" image-rotator="">

这可能有点过头了，因为我对角度的了解并不是很好，所以我不确定用动态数据制作指令的正确方法是什么。

关于如何使用动态图像，我需要做些什么？任何帮助或想法都表示赞赏。

Heres a plunker with the directive.

Answer 1

所以你的傻瓜有两个问题。我将从简单的

开始

<img ng-repeat="img in imgs" class="child" ng-src="'{{src}}'">

您正在迭代imgs并将该图像对象存储在img中，因为您的代码应该如下所示。

<img ng-repeat="img in imgs" class="child" ng-src="{{img.src}}">

注意img.src。接下来是一个稍微令人困惑的问题，只有在AngularJS从ng-repeat创建DOM之后才需要调用jQuery插件。通过几次谷歌搜索和this answer，最好的方法是将你的插件调用放在$timeout内。

.directive('imageRotator', function ($timeout) {
  return {
      restrict: 'A',
      link: function ($scope, $element, $attr) {
          console.log('Before Function');
          $timeout(function() {
            $element.j360();
          });

          console.log('After Function');

      }
  };
});

我对AngularJS了解不多，但从我可以收集的内容来看，$digest周期负责创建DOM，并且$timeout毫不拖延地使用$digest等待{{1}循环完成然后执行你的功能。我可能错了，但它对我有用。

自定义角度指令不适用于动态图像

1 个答案: