由于您需要一种新的类型/类型的组件，因此这对于自定义指令来说是一个很好的案例。
由于父/主/三态复选框和各个双状态复选框需要相互交互，因此我建议使用带有其自己的控制器的单个指令来处理逻辑。
<tri-state-checkbox checkboxes="listelements"></tri-state-checkbox>
指示：
app.directive('triStateCheckbox', function() { return { replace: true, restrict: 'E', scope: { checkboxes: '=' }, template: '<div><input type="checkbox" ng-model="master" ng-change="masterChange()">' + '<div ng-repeat="cb in checkboxes">' + '<input type="checkbox" ng-model="cb.isSelected" ng-change="cbChange()">{{cb.desc}}' + '</div>' + '</div>', controller: function($scope, $element) { $scope.masterChange = function() { if($scope.master) { angular.forEach($scope.checkboxes, function(cb, index){ cb.isSelected = true; }); } else { angular.forEach($scope.checkboxes, function(cb, index){ cb.isSelected = false; }); } }; var masterCb = $element.children()[0]; $scope.cbChange = function() { var allSet = true, allClear = true; angular.forEach($scope.checkboxes, function(cb, index){ if(cb.isSelected) { allClear = false; } else { allSet = false; } }); if(allSet) {$scope.master = true;masterCb.indeterminate = false; } else if(allClear) {$scope.master = false;masterCb.indeterminate = false; } else {$scope.master = false; masterCb.indeterminate = true; } }; $scope.cbChange(); // initialize }, };});更改模板以满足您的需要，或者将外部模板与templateUrl一起使用。
该指令假定checkboxes数组包含具有
isSelected属性和
desc属性的对象。
柱塞。
更新
：如果您只希望该指令仅呈现三态复选框，因此单个复选框位于HTML中（例如@Piran的解决方案），这是该方法的另一个更小巧的变体。对于这个笨拙的人，HTML将是：
<tri-state-checkbox checkboxes="listelements" ></tri-state-checkbox>select all<div ng-repeat="item in listelements"> <input type="checkbox" ng-model="item.isSelected"> {{item.desc}}</div>
