Question

我在同一页面的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

在排序方面，我希望一次只能激活一个按钮。

Answer 1

管理这件事有两种方法

**方式1 **（很容易）

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

scope.$apply(function() {

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

          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指令处于活动状态

2 个答案: