angular.js - angularjs在link中操作dom的一些考慮？

Question

<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。
有沒有好的建議，或其他實作方法。

Answer 1

第一種方法其實很不好，因為ng-checked過多會在同一個scope上產生大量的$watcher。影響性能。

這個你可以看看 angular ng-checked 的源碼

javascript// boolean attrs are evaluated
forEach(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 -> A1
checkbox2 -> A2
checkbox3 -> A3
checkbox4 -> 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 等功能。

Answer 2

我個人覺得第一個方法就可以，用第二種方法的話，感覺有點雜了。