AngularJS指令，ng-repeat和一個jquery插件

Question

我在我的html頁面加載了感言，我正在使用flexslider。

的標記看起來是這樣的：

<section class="testimonials"> 
<div class="row"> 
    <div class="small-12 column"> 
     <div class="flexslider"> 
      <ul class="slides"> 
       <li> 
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2> 
        <span>- Author Name</span> 
       </li> 
       <li> 
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2> 
        <span>- Author Name</span> 
       </li> 
       <li> 
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2> 
        <span>- Author Name</span> 
       </li> 
       <li> 
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2> 
        <span>- Author Name</span> 
       </li> 
       <li> 
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2> 
        <span>- Author Name</span> 
       </li> 
      </ul> 
     </div> 
     <div class="author-thumbs"> 
      <ul class="slides"> 
       <li> 
        <div> 
         <span class="container"> 
          <img src="assets/img/testimonial-author-pic.jpg" alt=""> 
         </span> 
        </div> 
       </li> 
       <li> 
        <div> 
         <span class="container"> 
          <img src="assets/img/testimonial-author-pic.jpg" alt=""> 
         </span> 
        </div> 
       </li> 
       <li> 
        <div> 
         <span class="container"> 
          <img src="assets/img/testimonial-author-pic.jpg" alt=""> 
         </span> 
        </div> 
       </li> 
       <li> 
        <div> 
         <span class="container"> 
          <img src="assets/img/testimonial-author-pic.jpg" alt=""> 
         </span> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

起初，我就倒黴了，因爲自從角被加載的部分文件的文件準備好後，我的滑塊停止工作。所以我將flexslider初始化移動到一個指令。像這樣：

app.directive('testimonials', function() { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     element.find('.author-thumbs').flexslider({ 
      animation: "slide", 
      controlNav: "thumbnails", 
      controlNav: false, 
      directionNav: false, 
      itemWidth: 80, 
      minItems: 4, 
      maxItems: 4, 
      asNavFor: ".testimonials .flexslider", 
     }); 
     element.find('.flexslider').flexslider({ 
      animation: "slide", 
      controlNav: "thumbnails", 
      controlNav: false, 
      directionNav: false, 
      smoothHeight: true, 
      sync: ".testimonials .author-thumbs" 
     }); 
    } 
}; 
}); 

這樣我就可以在html部分添加評價。

好的，但現在我想把這個靜態內容，並將其移動到我的控制器，並進行ng重複。所以我這樣做：

app.controller('HomeCtrl', function($scope){ 
    $scope.testimonials = [ 
     {"quote":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod", "author":"Author Name", "img":"assets/img/testimonial-author-pic.jpg"}, 
     {"quote":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit.", "author":"Author Name", "img":"assets/img/testimonial-author-pic.jpg"}, 
     {"quote":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod", "author":"Author Name", "img":"assets/img/testimonial-author-pic.jpg"}, 
     {"quote":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod", "author":"Author Name", "img":"assets/img/testimonial-author-pic.jpg"}, 
    ] 
}); 

創造了推薦部分標記一個新的文件，並改變了它的指令是E類型：

​​

而現在......好了，現在推薦露面但flexslider沒有被初始化。任何人都知道我做錯了什麼？我在尋找並回答這個問題，可以解釋爲什麼我做錯了，因爲我正在努力學習它。

我跑angularjs 1.3.15

Answer 1

我設法得到這個工作包$超時內flexslider初始化，就像這樣：

app.directive('testimonials', function($timeout) { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: 'partials/elements/testimonials.html', 
     link: function(scope, element, attrs) { 
      $timeout(function(){ 
       element.find('.author-thumbs').flexslider({ 
        animation: "slide", 
        controlNav: "thumbnails", 
        controlNav: false, 
        directionNav: false, 
        itemWidth: 80, 
        minItems: 4, 
        maxItems: 4, 
        asNavFor: ".testimonials .flexslider", 
       }); 
       element.find('.flexslider').flexslider({ 
        animation: "slide", 
        controlNav: "thumbnails", 
        controlNav: false, 
        directionNav: false, 
        smoothHeight: true, 
        sync: ".testimonials .author-thumbs" 
       }); 
      }); 
     } 
    }; 
}); 

發生什麼，因爲我的推薦變量是硬編碼加載完成後，我需要$超時運行javascript。

當我將它更改爲從服務器加載推薦書時，$ watch可能是Dennis Smolek建議的更好的解決方案，因爲會發生對推薦書的實際更改，從而觸發flexlider init。我不是100％肯定的，因爲我還沒有測試過，但我堅信這是行得通的。當我進行更改並對其進行測試時，我會更新此答案

Answer 2

因此，當您更新ng中的內容時，會發現您的幻燈片可能無法正常工作，因爲它們不會附加到flexslider調用，但我還沒有試過flexslider/Angular。

首先我不認爲你需要指令，如果你的計劃只是在加​​載內容時觸發。你的控制器應該能夠抓住它。

原因WHY不工作的原因是，當鏈接函數在摘要循環中運行時，這些元素不存在，因此您在沒有任何操作的情況下調用flexslider，然後循環的下一部分出現並注入重複的內容，但是您已經接通了你的電話。

我會做$手錶和設置功能：

function setupFlexslider() { 
    //your flexslider code 
} 
$scope.$watch('testimonials', function(newData,oldData) { 
    if(newData){ 
     setupFlexslider(); 
    } 
} 

所以，當你填補值（元素必須存在），這將觸發，如果你改變它們就會重燒。只有我現在不知道的事情是當你彈出兩次flexslider時會發生什麼......