javascript - 更改数组后 list 指令停止工作

Question

所以我有以下指令:

app.directive('checklistModel', ['$parse', '$compile', function($parse, $compile) {
    // contains
    function contains(arr, item, comparator) {
        if (angular.isArray(arr)) {
            for (var i = arr.length; i--;) {
                if (comparator(arr[i], item)) {
                    return true;
                }
            }
        }
        return false;
    }

    // add
    function add(arr, item, comparator) {
        arr = angular.isArray(arr) ? arr : [];
        if(!contains(arr, item, comparator)) {
            arr.push(item);
        }
        return arr;
    }

    // remove
    function remove(arr, item, comparator) {
        if (angular.isArray(arr)) {
            for (var i = arr.length; i--;) {
                if (comparator(arr[i], item)) {
                    arr.splice(i, 1);
                    break;
                }
            }
        }
        return arr;
    }

    // http://stackoverflow.com/a/19228302/1458162
    function postLinkFn(scope, elem, attrs) {
        // compile with `ng-model` pointing to `checked`
        $compile(elem)(scope);

        // getter / setter for original model
        var getter = $parse(attrs.checklistModel);
        var setter = getter.assign;
        var checklistChange = $parse(attrs.checklistChange);

        // value added to list
        var value = $parse(attrs.checklistValue)(scope.$parent);


        var comparator = angular.equals;

        if (attrs.hasOwnProperty('checklistComparator')){
            comparator = $parse(attrs.checklistComparator)(scope.$parent);
        }

        // watch UI checked change
        scope.$watch('checked', function(newValue, oldValue) {
            if (newValue === oldValue) {
                return;
            }
            var current = getter(scope.$parent);
            if (newValue === true) {
                setter(scope.$parent, add(current, value, comparator));
            } else {
                setter(scope.$parent, remove(current, value, comparator));
            }

            if (checklistChange) {
                checklistChange(scope);
            }
        });

        // declare one function to be used for both $watch functions
        function setChecked(newArr, oldArr) {
            scope.checked = contains(newArr, value, comparator);
        }

        // watch original model change
        // use the faster $watchCollection method if it's available
        if (angular.isFunction(scope.$parent.$watchCollection)) {
            scope.$parent.$watchCollection(attrs.checklistModel, setChecked);
        } else {
            scope.$parent.$watch(attrs.checklistModel, setChecked, true);
        }
    }

    return {
        restrict: 'A',
        priority: 1000,
        terminal: true,
        scope: true,
        compile: function(tElement, tAttrs) {
            if (tElement[0].tagName !== 'INPUT' || tAttrs.type !== 'checkbox') {
                throw 'checklist-model should be applied to `input[type="checkbox"]`.';
            }

            if (!tAttrs.checklistValue) {
                throw 'You should provide `checklist-value`.';
            }

            // exclude recursion
            tElement.removeAttr('checklist-model');

            // local scope var storing individual checkbox model
            tElement.attr('ng-model', 'checked');

            return postLinkFn;
        }
    };
}]);

基本上它的作用是允许我创建以下内容:

 <label class="i-checks">
        <input type="checkbox" checklist-model="selectedUsers" class="userChecker"
               data-checklist-value="user">
        <i></i>
    </label>

基本上，无论何时单击复选框，该项目都会被添加到单独的列表中，在本例中为 object user已添加到列表selectedUsers

现在我正在创建一个 select all函数看起来像这样:

  scope.selectAll = function () {
    var filteredItems = $filter('filter')(scope.uninvitedList, scope.search);
    if (!scope.checkAll) {
        scope.selectedUsers = [];
    }
    else {
        scope.selectedUsers = filteredItems;
    }

};

这允许我选择所有可见元素

一旦我按下此按钮，它就会正确地将所有用户添加到列表中并选中所有复选框。我再次单击它，它将它设置为一个空数组，但是有一个问题:

1. 列表复选框仍处于选中状态，如下图所示

2. 我无法再选择个人并将其添加到列表中。

谁能看出我做错了什么？

Answer 1

看起来像是 selectedUsers 作用域变量中的 dot-rule 问题。请看看这个SO question明白我的意思。

在演示中，我使用 selection.selectedUsers 来实现双向绑定(bind)。

请看一下下面的工作演示或这个 jsfiddle .

angular.module('demoApp', [])
  .controller('mainController', function($scope, $timeout) {

    $scope.users = [{
      id: 0,
      name: 'John'
    }, {
      id: 1,
      name: 'Jane'
    }];
    $scope.selection = {
      selectedUsers: [$scope.users[0]]
    }; //[$scope.users[0]];

    $scope.selectAll = function() {
      //console.log($scope.checkAll);
      $scope.selection.selectedUsers = $scope.checkAll ?
        angular.copy($scope.users) : [];
    }
  })
  .directive('checklistModel', ['$parse', '$compile',
    function($parse, $compile) {
      // contains
      function contains(arr, item, comparator) {
        if (angular.isArray(arr)) {
          for (var i = arr.length; i--;) {
            if (comparator(arr[i], item)) {
              return true;
            }
          }
        }
        return false;
      }

      // add
      function add(arr, item, comparator) {
        arr = angular.isArray(arr) ? arr : [];
        if (!contains(arr, item, comparator)) {
          arr.push(item);
        }
        return arr;
      }

      // remove
      function remove(arr, item, comparator) {
        if (angular.isArray(arr)) {
          for (var i = arr.length; i--;) {
            if (comparator(arr[i], item)) {
              arr.splice(i, 1);
              break;
            }
          }
        }
        return arr;
      }

      // https://stackoverflow.com/a/19228302/1458162
      function postLinkFn(scope, elem, attrs) {
        // compile with `ng-model` pointing to `checked`
        $compile(elem)(scope);

        // getter / setter for original model
        var getter = $parse(attrs.checklistModel);
        var setter = getter.assign;
        var checklistChange = $parse(attrs.checklistChange);

        // value added to list
        var value = $parse(attrs.checklistValue)(scope.$parent);


        var comparator = angular.equals;

        if (attrs.hasOwnProperty('checklistComparator')) {
          comparator = $parse(attrs.checklistComparator)(scope.$parent);
        }

        // watch UI checked change
        scope.$watch('checked', function(newValue, oldValue) {
          if (newValue === oldValue) {
            return;
          }
          var current = getter(scope.$parent);
          if (newValue === true) {
            setter(scope.$parent, add(current, value, comparator));
          } else {
            setter(scope.$parent, remove(current, value, comparator));
          }

          if (checklistChange) {
            checklistChange(scope);
          }
        });

        // declare one function to be used for both $watch functions
        function setChecked(newArr, oldArr) {
          scope.checked = contains(newArr, value, comparator);
        }

        // watch original model change
        // use the faster $watchCollection method if it's available
        if (angular.isFunction(scope.$parent.$watchCollection)) {
          scope.$parent.$watchCollection(attrs.checklistModel, setChecked);
        } else {
          scope.$parent.$watch(attrs.checklistModel, setChecked, true);
        }
      }

      return {
        restrict: 'A',
        priority: 1000,
        terminal: true,
        scope: true,
        compile: function(tElement, tAttrs) {
          if (tElement[0].tagName !== 'INPUT' || tAttrs.type !== 'checkbox') {
            throw 'checklist-model should be applied to `input[type="checkbox"]`.';
          }

          if (!tAttrs.checklistValue) {
            throw 'You should provide `checklist-value`.';
          }

          // exclude recursion
          tElement.removeAttr('checklist-model');

          // local scope var storing individual checkbox model
          tElement.attr('ng-model', 'checked');

          return postLinkFn;
        }
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
  <h3>
    Directive
    </h3>
  <input type="checkbox" ng-model="checkAll" ng-change="selectAll()" />check all
  <div ng-repeat="user in users">
    <label class="i-checks">
      <input type="checkbox" checklist-model="selection.selectedUsers" class="userChecker" data-checklist-value="user">{{user.name}}
    </label>
  </div>
  <pre>
Debugging models here:
selectedUsers:
{{selection.selectedUsers | json : 2}}
user model:
{{users | json: 2}}
    </pre>
</div>