javascript - 为什么以下函数没有选择该指令内的所有复选框？

Question

以下指令有两个选项卡:一个带有复选框，另一个不带复选框。它还具有选择所有复选框的功能:

  .directive('tableList', function() {
    return {
      restrict: 'EA',
      template: '<button ng-if="listAll" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">' +
      'Launch demo modal' +
    '</button>' +
    '<table class="table table-stripped">' +
    '<thead>' +
        '<th>SOME CODE</th>' +
      '</tr>' +
    '</thead>' +
    '<tbody>' +
      '<tr ng-repeat="item in listThis">' +
        '<th scope="row">{{$index + 1}}</th>' +
        '<td><a href="#/groups/{{item.id}}">{{item.name}}</a></td>' +
        '<td>SOME CODE</td>' +
      '</tr>' +
    '</tbody>' +
      '</table>' +
      '<div ng-if="listAll" class="" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">' +
    '<div class="modal-dialog">' +
      '<div class="modal-content">' +
        '<div class="modal-header">' +
          '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
          '<h4 class="modal-title">Modal title</h4>' +
        '</div>' +
        '<div class="modal-body">' +
          '<table class="table table-stripped list-all">' +
        '<thead>' +
          '<tr>' +
            '<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>' +
            '<th>SOME CODE</th>' +
          '</tr>' +
        '</thead>' +
        '<tbody>' +
          '<tr ng-repeat="item in listAll">' +
            '<th scope="row"><input type="checkbox" value="0" ng-model="item.selected"></th>' +
            '<td><a href="#/groups/{{item.id}}">{{item.name}}</a></td>' +
            '<td>SOME CODE</td>' +
          '</tr>' +
        '</tbody>' +
          '</table>' +
        '</div>' +
        '<div class="modal-footer">' +
          '<button type="button" class="btn btn-primary">Save changes</button>' +
        '</div>' +
      '</div><!-- /.modal-content -->' +
    '</div><!-- /.modal-dialog -->' +
      '</div><!-- /.modal -->',
      scope: {
    listThis: "=",
    listAll: "=",
    submit: "&"
      },
      controller: function() {
      },
      link: function(scope, elem, attr, ctrl) {
    scope.checkAll = function() {
      if (scope.selectedAll) {
        scope.selectedAll = true
      } else {
        scope.selectedAll = false
      }
      angular.forEach(scope.listAll, function (item) {
        item.selected = scope.selectedAll
      })
    }
      }
  };
})

复选框有效。如果我检查第一项，情况如下:

[
  {
    "id": "1",
    "name": "User 1",
    "selected": true
  },
  {
    "id": "2",
    "name": "User 2",
    "selected": false
  },
  {
    "id": "3",
    "name": "User 3",
    "selected": false
  }
]

但是当我单击检查所有项目的复选框时，什么也没有发生:

可能是什么问题？

这就是我使用该指令的方式:

  <table-list
list-this="users"
list-all="users"
submit="submit(event)">
  </table-list>

Answer 1

问题出在这段代码中:

if (scope.selectedAll) {
    scope.selectedAll = true
} else {
    scope.selectedAll = false
}

此语句没有任何意义，因为如果 scope.selectedAll 最初为 false，则它永远不会变为 true，反之亦然 - 它只是永远不会更改值。可能你的意思是:

if (scope.selectedAll) {
    scope.selectedAll = false
} else {
    scope.selectedAll = true
}