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

我认为你最终想要的是：

tab-content是一个附加必要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>

你可以做些什么来删除第二个ng-class指令是在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，则可以进一步扩展模板。

编写一个angularjs指令来包装其他指令

2 个答案: