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

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 使图像动态化时，插件不起作用。我读过here，关于在使用动态html时使用$compile，如下所示：

<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=""> 

这可能有点让我头疼，因为我对 Angular 的了解不是很好，所以我不确定什么是制作指令的正确方法，尤其是使用动态数据。

关于我需要做什么才能使它与动态图像一起使用有什么想法吗？任何帮助或想法表示赞赏。

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 循环完成，然后执行你的功能。我可能错了，但它对我有用。