如何使 AngularJS 指令处于活动状态

Question

我在同一页的 3 个地方（A、B、C）使用了一个指令。
当我单击其中一个（即 B）时，它会在其上添加一个 class(active)。

但与此同时，我需要从另外两个按钮中删除活动 class。

<test defaultclass="active">A</test>
<test>B</test>
<test>C</test>

app.directive("test", function() {
  return {
    restrict: 'E',
    scope: {
      defaultclass: "=?"
    },
    transclude: true,
    link: function(scope, element, attrs) {
      scope.activeclass = attrs.defaultclass
      element.bind('click', function() {
        scope.$apply(function() {
          scope.activeclass = 'active';
        });
      });
    },
    template: '<btn ng-class="activeclass">Button <span ng-transclude></span></btn>'
  }
});

这是示例 plunker：https://plnkr.co/edit/J330f4jrHZnpUS9J66qY?p=preview

总之，我想一次只激活一个按钮。

Answer 1

有两种方法可以管理这些东西

**方式 1 **（很简单）

您可以添加以下行来解决此问题。

scope.$apply(function() {

angular.element('.active').removeClass('.active');// this is jLite code if in your project jquery so you can replace it with jquery code

          scope.activeclass = 'active';
        });

方式 2（有点复杂）。

当用户是客户端时，使用唯一 ID 检查跟踪每个指令

Answer 2

更好的方法是像这样处理外部点击

Working Plunkr

<body>
    <test is-active='chosen_button=="a"' ng-click='chosen_button="a"'>A</test>
    <test is-active='chosen_button=="b"' ng-click='chosen_button="b"'>B</test>
    <test is-active='chosen_button=="c"' ng-click='chosen_button="c"'>C</test>
</body>

和指令

app.directive("test", function() {
  return {
    restrict: 'E',
    scope: {
      isActive: "="
    },
    transclude: true,
    link: function(scope, element, attrs) {

    },
    template: '<btn ng-class="isActive?\'active\':\'\'">Button <span ng-transclude></span></btn>'
  }
});

如何使 AngularJS 指令处于活动状态

How to make AngularJS directive as active

html

javascript

angularjs

angularjs-directive