如何調整AngularJS中的現有裝飾器指令以選擇所有復選框？

Question

我一直在使用decorator指令創建基於此先前答案的復選框列表： 如何使用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;

  }]);

});