AngularJS 实现将所有输入检查为可重用指令的最佳方式

Question

我正在寻找为多行输入实现 "check-all" 输入的最佳方法。

在这种情况下，由于有多种类型的列表视图，每一种都有自己的指令和控制器。

我正在考虑将全选控件实现为属性指令，在父指令的模板中，类似于：

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

想法是将父指令的名称作为自定义属性的值传递，因此 Check All Directive 的这个实例知道要使用哪个父范围，从而检查或取消选中所有行在各自的 table.

这是我被挂断的地方，我不确定如何动态设置要求值。静态设置它很容易：

require: '^parentDirective',

但这在这里行不通。

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

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

干杯！

Answer 1

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

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>

AngularJS 实现将所有输入检查为可重用指令的最佳方式

AngularJS best way to implement check all inputs as reusable Directive

javascript

scope

angularjs