如何在ng-repeat中的节点上添加指令一次

Question

我有一个类似于joyride的功能巡视指令，该指令通过在DOM元素上添加指令来工作，该指令在用户浏览过程中突出显示该元素。例如：

<button test-drive-step 
     test-drive-text="To activate your search click here" 
     test-drive-next-label="Next">Search</button> 

我的问题是，如果我想将这个元素的列表上，并使用此功能，我怎么能做到这一点指出一个单一的元素？例如，如果我想要放置test-drive-step指令的节点位于ng-repeat中，那么如何将该指令限制为只有一个元素而不是全部元素？

例如，

<li ng-repeat="item in items" test-drive-step ...>{{item.name}}</item> 

这将使试驾步指令，在项目的每一个元素，但我只是希望它的第一个元素。我怎么能限制它仅仅是第一个元素？

Answer 1

一种选择是将条件传递给指令，告诉它是否应用自身。

例如，我们可以使用$index === 0来测试我们是否在第一个ng-repeat元素（$index是我们目前使用的ng-repeat元素）。像这样

<li ng-repeat="item in items" test-drive-step="$index === 0" ...>{{item.name}}</item> 

并将其添加到您的指令范围：

scope: { 
    test-drive-step: '=' 
}, 

所以指令可以应用本身仅当属性是true：

link: function(scope, element, attr) { 
     if (scope.test-drive-step) 
      element.addClass('blue'); // Or whatever... 
} 

这里的展示概念的小提琴：http://jsfiddle.net/6sc0acoa/2/