如何调整 AngularJS 中现有的装饰器指令以选中所有复选框？

Question

我一直在使用装饰器指令来创建一个基于先前答案的复选框列表： How do I bind to list of checkbox values with AngularJS?

但是，我想添加一个“顶级”复选框来切换所有复选框的选择。

有没有办法自定义这个指令来实现这个？

编辑（我已经包含了我的代码的精简版）：

(function ()
{
    var app = angular.module('editFormApp', ['centralCommunicationModule']);


    app.directive('editForm', ['sharedProjectService', function (sharedProjectService) {
            return {
                restrict: 'A',

                controller: ['$scope', '$http', '$filter', 'centralCommunicationService', function ($scope, $http, $filter, centralCommunicationService) {

                    $scope.checked_custGroupMembers = [];

                    $scope.reschedule = {};

                    // get reschedule object from server via service when id changes
                    $scope.$watch(function () { return sharedProjectService.rescheduleId }, function (newVal, oldVal) {
                    if (newVal != '') {
                        $scope.rescheduleId = newVal;                       

                        $http.get('/Reschedule/Get/', { params: { id: $scope.rescheduleId } }).success(function (data) {
                            var reschedule = angular.fromJson(data);

                            $scope.reschedule = reschedule;

                        });
                    }
                });

                }],

                templateUrl: '/Forms/_AddEditForm'  // MVC controller returning PartialView("~/Views/AngularTemplates/_AddEditForm.cshtml", model);
            };
    }]);
}



// declare directive in html
<div edit-form></div>

// template _AddEditForm.cshtml snippet below

<div ng-repeat="circulationMember in reschedule.CustGroupCirculationMembers">
    <label>
        <input name="custGroupMembers" type='checkbox' value="{{circulationMember.FullName}}" check-list='checked_custGroupMembers' id="{{circulationMember.Id}}" /> {{circulationMember.FullName}}
    </label>
</div>

Answer 1

你可以尝试做这样的事情，没有看到一些代码很难完全回答

angular.module('change this to your module').config(function($provide) {

  'use strict';

  $provide.decorator('checkList', ['$delegate', function($delegate) {
    var directive = $delegate[0];
    directive.link = function(scope, elem, attrs) {

      var invokes = angular.module('checklist')._invokeQueue,
          result = [];
      for(var i=0; i<invokes.length; i++) {
          if(invokes[i][1] == "directive") {
              result.push(invokes[i][2][0]);
          }
      }

      for(var j=0; j<result.length; j++) {
        // change checked for each one here
      }

      var handler = function(setup) {
        var checked = elem.prop('checked');
        var index = scope.list.indexOf(scope.value);
        if (checked && index == -1) {
          if (setup) elem.prop('checked', false);
          else scope.list.push(scope.value);
        } else if (!checked && index != -1) {
          if (setup) elem.prop('checked', true);
          else scope.list.splice(index, 1);
        }
      };

      var setupHandler = handler.bind(null, true);
      var changeHandler = handler.bind(null, false);

      elem.bind('change', function() {
        scope.$apply(changeHandler);
      });

      scope.$watch('list', setupHandler, true);

    };

    return $delegate;

  }]);

});