AngularJS ng-repeat动态标签sub-tab-active类无法取消的问题

这是一个典型的AngularJS作用域原型继承问题，我来帮你拆解原因和解决办法：

问题根源 #

AngularJS的ng-repeat指令会为每个迭代项创建独立的子作用域，这些子作用域通过原型链继承自控制器的父作用域。当你在动态标签的ng-click中直接赋值sss = b.Key时，因为子作用域原本没有sss这个原始类型变量，它不会去修改父作用域的sss，而是在子作用域自身创建一个新的sss属性。

这就导致了两种标签的行为差异：

• 静态标签的ng-click直接修改父作用域的sss，所有静态标签的ng-class判断的都是父作用域的sss，所以切换正常。
• 动态标签的ng-click修改的是自身子作用域的sss，它的ng-class也会优先使用子作用域的sss（因为子作用域已经有这个属性了）。当你点击其他标签时，父作用域的sss可能被修改，但动态标签的子作用域sss还是原来的值，所以sub-tab-active类无法被取消。

解决方案 #

推荐使用对象属性封装变量的方式来规避原型继承问题，这是AngularJS中的最佳实践：

1. 修改控制器代码，将sss封装到对象中 #

把原始类型的sss改成对象的属性，这样子作用域会通过原型链找到父作用域的对象，直接修改其属性，而不会创建新的变量：

angular.module('app', []).controller('Ctrl', ['$scope', '$http', function ($scope, $http) {
  $scope.beteiligungen = [{ Key: "0000", Value: "Test1" }, { Key: "00000", Value: "Test2" }];
  // 用对象封装激活状态，避免作用域继承问题
  $scope.tabState = {
    activeKey: '0'
  };
}]);

2. 更新HTML中的绑定逻辑 #

把所有涉及sss的地方替换为tabState.activeKey：

<body ng-controller="Ctrl" ng-app="app" style="background-color: #f4f4f4">
 <table class="tabs-container" border="0" cellspacing="0" cellpadding="0" style="border-collapse: separate" ng-init="tabState.activeKey = '0'">
 <tr>
 <td class="tab" ng-click="tabState.activeKey = '0'" ng-class="{'sub-tab-active': tabState.activeKey === '0'}">Test</td>
 <td class="tab" ng-click="tabState.activeKey = '00'" ng-class="{'sub-tab-active': tabState.activeKey === '00'}">Test 00</td>
 <td class="tab" ng-click="tabState.activeKey = '000'" ng-class="{'sub-tab-active': tabState.activeKey === '000'}">Test 000</td>
 <td class="tab" ng-repeat="b in beteiligungen" ng-click="tabState.activeKey = b.Key" ng-class="{'sub-tab-active': tabState.activeKey === b.Key}">Test {{b.Key}}</td>
 </tr>
 </table>
 <div class="container-full-border container-padding">
 <div ng-show="tabState.activeKey === '0'">Test 0</div>
 <div ng-show="tabState.activeKey === '00'">Test 00</div>
 <div ng-show="tabState.activeKey === '000'">Test 000</div>
 <div ng-show="tabState.activeKey === '0000'">Test 0000</div>
 <div ng-show="tabState.activeKey === '00000'">Test 00000</div>
 </div>
 </body>

备选方案（不推荐）：使用$parent访问父作用域 #

如果你不想修改变量结构，可以在动态标签的绑定中直接用$parent强制访问父作用域的sss：

<td class="tab" ng-repeat="b in beteiligungen" ng-click="$parent.sss = b.Key" ng-class="{'sub-tab-active': $parent.sss === b.Key}">Test {{b.Key}}</td>

这种方法虽然能解决问题，但依赖于作用域层级，后续代码结构变化容易引发新问题，所以更推荐第一种对象封装的方式。

效果验证 #

修改后，无论是静态标签还是动态标签，点击时都会统一修改父作用域中tabState.activeKey的值，所有标签的ng-class都会基于同一个变量判断，就能实现正常的激活状态切换了。

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