寫一個angularjs指令來包裝其他指令

Question

我沒有經驗寫我自己的指令。

在我的應用我已經實現我自己的標籤是這樣的：

<div id="tab_1" ng-class="{'active': selected == 1}" ng-click="selected = 1"></div> 
<div id="tab_2" ng-class="{'active': selected == 2}" ng-click="selected = 2"></div> 
<div id="tab_3" ng-class="{'active': selected == 3}" ng-click="selected = 3"></div> 

通過這樣的內容：

<div id="tab_1_content" ng-class="{'active': selected == 1}"></div> 
<div id="tab_2_content" ng-class="{'active': selected == 2}"></div> 
<div id="tab_3_content" ng-class="{'active': selected == 3}"></div> 

它工作正常，但我覺得，而不是有到處都是相同的ng-class和ng-click，我可以在指令中包裝這個功能。有人可以解釋這是如何工作的，並且可能展示出做這樣的事情的最佳做法？

Answer 1

我想你最終想要的是這樣的：

與標籤內容是，重視必要的HTML一個指令。因此，在一個模板，你會定義：

<div ng-class="{'active': selected == 1}" ng-click="selected = 1"> 
    <div ng-class="{'active': selected == 1}" ng-click="selected = 1"></div> 
</div> 

至於定義的指令，檢查出http://www.ng-newsletter.com/posts/directives.html和angularjs主頁，他們實際上有一個選項卡的例子。

奇怪的是，點擊事件不應該重複，父div應該記錄點擊事件。所以，現在我們將不得不在模板是：

<div ng-class="{'active': selected == 1}" ng-click="selected = 1"> 
    <div ng-class="{'active': selected == 1}"></div> 
</div> 

，哪些是你可以做，以除去第二納克級的指令是定義CSS：

.active div { your styles here } 

所以，你最終會得到：

<div ng-class="{'active': selected == 1}" ng-click="selected = 1"> 
    <div></div> 
</div> 

希望這有助於。

Answer 2

下面是一個示例指令。在你的情況下，你想用更簡單的html代替更復雜的html。什麼是模板是什麼取代更簡單的HTML。限制是說你使用的是元素標籤，transclude允許標籤的內容繼承，scope是你正在使用的屬性。

HTML: 
<my-wrapper value="1">Alpha</my-wrapper> 

Javascript: 
myApp.directive('myWrapper', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: { 
      value: '@' 
     }, 
     template: '<div id="tab_{{value}}_content" ng-class="{\'active\': selected == {{value}}}" ng-click="selected = {{value}}" ng-transclude></div>', 
     replace: true 
    }; 
}); 

這裏是一個小提琴：http://jsfiddle.net/C1ph3r/2p88D/

因爲選擇並沒有顯示出聲明，可能必須擴大這個例子來完成交互。如果您需要在第一個嵌套另一個div，模板可以進一步擴展。