如何实现AngularJS指令实例的单选激活：仅一个按钮保持active状态

你的问题核心很明确：每个<test>指令都拥有独立的隔离作用域，点击其中一个按钮时，只会修改当前指令内部的状态，其他指令完全感知不到这个变化，自然没法移除自己的active类。要实现“单选激活”，我们需要让所有指令共享同一个状态源，下面是最直接的解决方案：

解决方案思路 #

1. 在父作用域（比如控制器）中维护一个全局激活标识，用来记录当前处于激活状态的按钮；
2. 每个指令接收自己的唯一标识（比如'A'/'B'/'C'）和这个全局激活标识；
3. 点击按钮时，更新全局激活标识为当前按钮的唯一标识；
4. 所有指令通过对比自己的标识和全局标识，来决定是否添加active类。

修改后的完整代码 #

HTML部分 #

<div ng-controller="MainCtrl">
  <test btn-key="'A'" active-btn="activeBtn" default-active="true">A</test>
  <test btn-key="'B'" active-btn="activeBtn">B</test>
  <test btn-key="'C'" active-btn="activeBtn">C</test>
</div>

控制器部分 #

app.controller('MainCtrl', function($scope) {
  // 初始化默认激活的按钮为'A'
  $scope.activeBtn = 'A';
});

指令部分 #

app.directive("test", function() {
  return {
    restrict: 'E',
    scope: {
      // 当前按钮的唯一标识
      btnKey: '=',
      // 共享的全局激活标识
      activeBtn: '=',
      // 是否默认激活（可选参数）
      defaultActive: '=?'
    },
    transclude: true,
    link: function(scope, element, attrs) {
      // 如果设置了默认激活，初始化全局激活标识
      if (scope.defaultActive) {
        scope.activeBtn = scope.btnKey;
      }
      
      // 点击时更新全局激活标识
      element.bind('click', function() {
        scope.$apply(function() {
          scope.activeBtn = scope.btnKey;
        });
      });
    },
    // 通过对比全局标识和自身标识，动态切换active类
    template: '<btn ng-class="{\'active\': activeBtn === btnKey}">Button <span ng-transclude></span></btn>'
  }
});

为什么这样能解决问题？ #

所有指令都绑定到父作用域的activeBtn变量上，当任何一个按钮被点击时，activeBtn的值会被更新，所有指令都会实时感知到这个变化，并通过activeBtn === btnKey的判断来切换自己的激活状态，从而保证同一时间只有一个按钮处于激活状态。

其他可选方案 #

如果你的场景更复杂（比如指令不在同一个父控制器下），也可以使用Angular的事件机制：点击按钮时广播一个btnActivated事件，携带当前按钮的标识，其他指令监听这个事件，收到后更新自己的激活状态。不过对于这种简单的同组单选场景，共享父作用域变量是最简洁高效的方式。

内容的提问来源于stack exchange，提问作者om_jaipur