定製角指令不能與動態圖像

Question

我工作的一個自定義的指令，對於具有基於一個jQuery插件，我寫了一個像器AngularJs工作，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時閱讀here關於使用$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=""> 

這也許有點超過我的頭，我有關角度的知識不是很好，所以我不確定什麼是正確的方法來制定指令，特別是動態數據。

我需要做什麼才能使它與動態圖像一起工作的任何想法？任何幫助或想法表示讚賞。

Heres a plunker with the directive.

Answer 1

所以你plunker有兩個問題。我會用簡單的一個

<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週期完成，然後執行您的功能。我可能對此有錯，但它對我有用。