AngularJS实现将所有输入作为可重用指令实现的最佳方法

Question

I'm looking for the best way to implement a "check-all" input for multiple rows of input.

In this case, since there are several types of list views, each one has it's own Directive and Controller.

I was thinking to implement the check-all control as an Attribute Directive, inside the parent Directive's template, something like:

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

The idea is to pass along the name of the parent Directive as the value of the custom attribute, so this instance of the Check All Directive knows which parent scope to use, to thus check, or uncheck all of the rows in the respective table.

Here's where I got hung up, I wasn't sure how to dynamically set a require value. Setting it statically is easy:

require: '^parentDirective',

But that won't work here.

Perhaps I'm over-complicating things, I'm guessing there is an easier way to do this.

The end result is to bubble up the check/uncheck change event on the input to the parent Directive, so all of it's checkboxes can be either checked or unchecked accordingly...

Cheers!

Answer 1

I'd suggest taking another approach. Instead of attempting to make this some sort of DOM manipulation challenge just update a model that stores the information about what's selected and use that to drive the view. So long as the collection of items has some shared property like "selected" then it doesn't matter what other properties the objects have so this can apply across any number of lists. Will include a sample here soon.

 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>