написать директиву 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 домашней страницы, они на самом деле есть вкладка пример.

Кажется странным, что событие click не должно повторяться, родительский div должен записывать событие click. Так что теперь мы имеем в шаблоне:

<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 позволяет переносить содержимое тега, область - это атрибут, который вы используете.

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 внутри первого.