ng-table表头全选复选框嵌入text/ng-template后功能失效问题

我来帮你搞定这个问题！你遇到的情况是因为ng-table的表头模板会创建一个独立的子作用域，直接使用$scope上的selectedAll变量时，子作用域会创建自己的同名属性，导致和父作用域的变量断开关联，所以点击复选框时父作用域的函数根本没被正确触发。

修复方案：用对象包装作用域变量（推荐，符合Angular最佳实践） #

Angular的作用域继承是基于原型链的，如果你把变量放在一个对象里，子作用域会继承这个对象的引用，而不会创建新的属性，这样就能保证父子作用域操作的是同一个变量。

修改后的JS代码：

// 用对象包装选中状态，避免子作用域覆盖
$scope.selection = { selectedAll: false };

$scope.selectAll = function() {
  angular.forEach($scope.invoiceApprovalList, function(invoiceApproval) {
    invoiceApproval.checkboxItem = $scope.selection.selectedAll;
  });
};

$scope.checkIfAllSelected = function() {
  $scope.selection.selectedAll = $scope.invoiceApprovalList.every(function(invoiceApproval) {
    return invoiceApproval.checkboxItem === true;
  });
};

修改后的HTML模板：

<script type="text/ng-template" id="all.html">
  <!-- 现在绑定的是对象的属性，子作用域会继承父作用域的selection对象 -->
  <input type="checkbox" ng-model="selection.selectedAll" ng-click="selectAll()" /> 
</script>

另一种临时方案：直接访问父作用域（不推荐，耦合性高） #

如果你不想重构变量结构，也可以在模板里用$parent直接引用父作用域的变量，但这种方式会让代码依赖作用域结构，后续维护起来更麻烦：

<script type="text/ng-template" id="all.html">
  <input type="checkbox" ng-model="$parent.selectedAll" ng-click="$parent.selectAll()" /> 
</script>

为什么原来的代码失效？ #

当你在表头模板里使用ng-model="selectedAll"时，子作用域会创建一个属于自己的selectedAll变量，而不是引用父作用域的同名变量。这时候你点击复选框，修改的只是子作用域的变量，父作用域的selectedAll和selectAll()函数根本没被触发，自然全选功能失效。

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