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时会发生什么......