问题描述
<li select-all status='checked'>全选</li><p> <input type='checkbox' ng-checked='checked' ng-model='checked'> <input type='checkbox' ng-checked='checked' ng-model='checked'> <input type='checkbox' ng-checked='checked' ng-model='checked'></p>
我在link中可以更改checked并影响视图，实现点击全选的功能，但是其实我也可以向下面这样
<li select-all boxWrap='.checkbox'>全选</li><p class='checkbox'> <input type='checkbox' > <input type='checkbox'> <input type='checkbox'></p>
然后在directive的link中拿到 .checkbox 然后使用jq先拿到p.checkbox 然后将input[type=checkbox]一次设置成checked ，反选的时候类似
这种方案我更喜欢第二种，我觉得可能不会产生太多的$watch, 但是我觉得第二种方法 设置类名作为dirctive的属性好像就是 拐了个弯来使用 jq。有没有好的建议，或者其他实现方法。
问题解答
回答1：第一种方法其实很不好，因为ng-checked过多会在同一个scope上产生大量的$watcher。影响性能。
这个你可以看看 angular ng-checked 的源代码
javascript// boolean attrs are evaluatedforEach(BOOLEAN_ATTR, function(propName, attrName) { // binding to multiple is not supported if (propName == 'multiple') return; var normalized = directiveNormalize(’ng-’ + attrName); ngAttributeAliasDirectives[normalized] = function() { return { restrict: ’A’, priority: 100, link: function(scope, element, attr) {scope.$watch(attr[normalized], function ngBooleanAttrWatchAction(value) { attr.$set(attrName, !!value);}); } }; };});
可以看出有多少 ng-checked 就会有多少个 $watcher。这样做绝对不是最佳实践。
第二种方法如你所说确实不好（不要把dom操作的思想暴漏到view，一点都不行）。
分析一下需求，其实这个需求分析成angular模型的思想。可以是这样。
全选按钮 -> A
checkbox1 -> A1checkbox2 -> A2checkbox3 -> A3checkbox4 -> A4
当 A 的model的值为(true value) 时，A1-A4model的值改成(true value)；然后再指令中执行触发$digest循环。这样。所有checkbox就别变过来了。这样就不会产生$watcher。而且实现了全选的目标。
给你一段随手写的代码:
html<label checkbox-select-all group='[’checkbox1’, ’checkbox2’, ’checkbox3’]'>全选</label><p> <input type='checkbox' ng-model='checkbox1'> 1 <input type='checkbox' ng-model='checkbox2'> 2 <input type='checkbox' ng-model='checkbox3'> 3</p>
javascriptdirective(’checkboxSelectAll’, [’$parse’, function($parse){ var linkFn = function(scope, element, attrs){var group = $parse(attrs.group || ’[]’)(scope);element.on(’click’, function(){ scope.$apply(function(){group.forEach(function(checkbox){ scope[checkbox] = true;}); });}); }; return {restrict: ’A’,link: linkFn }}])
这样的话，这样就不会发生你说的第二种请情况。这样的形式有很强的扩展能力。（有空了可以实现一下）可以支持分类全选。(以上只是随手写的代码)。
其实我觉得题主最这个问题的疑惑可能是因为熟悉了使用DOM操作来解决问题。其实我以前也是这样。（我现在有时也还是这样）。很正常。
===================================
今天下班之后根据设想的模型实现了一个草稿版（随便实现的，缺少双向绑定）。放到了 Plunker上。这个版本是草稿本。有很多地方不完善，比如 ng-true-value, ng-false-value 等功能。
回答2：我个人感觉第一种方法就可以，用第二种方法的话，感觉有点杂了。
