如何在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/