javascript - AngularJS 实现检查所有输入作为可重用指令的最佳方法

Question

我正在寻找为多行输入实现“全部检查”输入的最佳方法。

在本例中，由于 ListView 有多种类型，因此每种类型都有自己的指令和 Controller 。

我正在考虑将全选控件实现为父指令模板内的属性指令，如下所示:

<input check-all="'nameOfParentDirective'">

这个想法是将父指令的名称作为自定义属性的值传递，因此“检查全部指令”的此实例知道要使用哪个父范围，从而检查或取消选中该指令中的所有行。各自的表。

这就是我挂断的地方，我不确定如何动态设置所需值。静态设置它很容易:

require: '^parentDirective',

但这在这里行不通。

也许我把事情过于复杂化了，我猜有一种更简单的方法可以做到这一点。

最终结果是在父指令的输入上冒泡检查/取消选中更改事件，因此所有复选框都可以相应地选中或取消选中...

干杯!

Answer 1

我建议采取另一种方法。与其尝试进行某种 DOM 操作挑战，不如更新一个存储有关所选内容的信息的模型，并使用该信息来驱动 View 。只要项目集合具有一些共享属性(例如“选定”)，那么对象具有哪些其他属性并不重要，因此这可以应用于任意数量的列表。很快就会在此处包含示例。

angular.module('TestApp', [])

.factory('UtilFactory', function(){
  var utilFact = {};
  
  utilFact.selectAll = function(array){
    for(var i=0; i<array.length; i++){
      array[i].selected = true;
    }
  }
  
  return utilFact;
})
.controller('SomeCtrl', function($scope, UtilFactory){
  var randData = [];
  for(var i=0; i<100; i++){
    randData.push({
      id:i,
      data:Math.random()
    });
  }
  
  $scope.someData = randData;
  
  $scope.UtilFactory = UtilFactory;

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="TestApp" ng-controller="SomeCtrl">
    <button ng-click="UtilFactory.selectAll(someData)">Select All</button>
  <div ng-repeat="item in someData">
    <label>
      <input type="checkbox" ng-model="item.selected"/>
      {{item.data}}
    </label>
  </div>
</div>