Javascript 编写angularjs指令以包装其他指令

我自己写指令的经验很少

在我的应用程序中，我一直在实现我自己的选项卡，如下所示：

<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>

内容如下：

<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类和ng click everywhere，不如将此功能包装在一个指令中。有人能解释一下这是如何工作的，并可能演示这样做的最佳实践吗？

我想你最终想要的是：

选项卡内容是附加必要html的指令。因此，在模板中，您可以定义：

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

所以你最终会得到：

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

---

希望这有帮助。

这里有一个示例指令。在您的例子中，您希望用更简单的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
    };
});

这是一把小提琴：

---

由于未显示要声明的selected，因此您可能必须展开此示例以完成交互性。如果需要在第一个div中嵌套另一个div，则可以进一步扩展该模板。

选项卡中没有父div。选项卡按钮和选项卡内容在html中是分开的。但我明白你为什么困惑了——我打错了问题。内容div中不应有单击侦听器。我已经更新了我的问题。嗯，这对于OPs的特殊情况来说是可以的，但是如果他们不想将其用作标记，那么只有属性会限制：“a”。