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

【问题标题】：How to make AngularJS directive as active如何使 AngularJS 指令处于活动状态
【发布时间】：2018-01-04 22:40:59
【问题描述】：

我在同一页面的 3 个位置（A、B、C）使用指令。
当我点击其中一个（即B）时，它正在添加一个类（活动）。

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

<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

在排序中，我想一次只保持一个按钮处于活动状态。

【问题讨论】：

在指令之外而不是链接函数之外执行此操作

标签： javascript html angularjs angularjs-directive

【解决方案1】：

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

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

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

scope.$apply(function() {

angular.element('.active').removeClass('.active');// 这是jLite代码，如果在你的项目jquery中，你可以用jquery代码替换它

          scope.activeclass = 'active';
        });

方式 2（有点复杂）。

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

【讨论】：

【解决方案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>'
  }
});

【讨论】：