Question

对于角度我正在使用指令来切换类：

app.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

HTML我有多次：

<div class="tab" toggle-class="open">
    <div class="title">
        <p>Tab title</p>
    </div>
    <div class="content">
        <!-- This element hidden by default, needs toggle -->
        <p>Foobar</p>

    </div>
</div>

它有效，但是当我点击.content - 元素中的某个位置时，它也会切换。但我希望它保持活跃。不要切换回关闭状态。

是否有一种简单的方法让它像这样工作： - 点击.title - 切换.content（将.open添加到.tab - 元素。

Answer 1

我只是认为您不需要自定义指令来执行此类操作。

这是两个例子，第一个用toggleClass的角度方式，第二个用全局角度方式。

两者都将满足本指令所涵盖的需求。

第一个：

<div ng-repeat="aTab in [{},{},{},{},{}]" class="tab" ng-class="{'open':isOpen}">
      <div class="title" ng-click="isOpen = !isOpen">
          <p>Tab title</p>
      </div>
      <div class="content">
          <!-- This element hidden by default, needs toggle -->
          <p>Foobar</p>

    </div>
</div>

使用此CSS

.content {
  display:none;
}
.open .content {
  display:block;
}

第二个：

<div ng-repeat="aTab in [{},{},{},{},{}]" class="tab">
      <div class="title" ng-click="aTab.show = !aTab.show">
          <p>Tab title</p> 
      </div>
      <div class="content2" ng-show="aTab.show">
          <!-- This element hidden by default, needs toggle -->
          <p>Foobar</p>

    </div>
</div>

你可以在这个plunker

中看到这些例子

希望有所帮助

编辑：更新了示例和plunker以显示它如何与ng-repeat

一起使用

Answer 2

添加了.parent()

app.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.parent().toggleClass(attrs.toggleClass);
            });
        }
    };
});

并切换到title元素。

<div class="tab">
    <div class="title" toggle-class="open">
        <p>Tab title</p>
    </div>
    <div class="content">
        <!-- This element hidden by default, needs toggle -->
        <p>Foobar</p>

    </div>
</div>

Angular toggle类到父元素

2 个答案: