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를 너무 많이 하면 동일한 범위에서 많은 수의 $watcher가 생성되기 때문입니다. 성능에 영향을 미칩니다.

Angular ng-checked의 소스 코드를 살펴볼 수 있습니다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 으아악

ng-checked 수만큼 $watchers가 많은 것을 볼 수 있습니다. 이렇게 하는 것은 확실히 최선의 방법은 아닙니다. 🎜 🎜두 번째 방법은 말씀하신 것처럼 정말 좋지 않습니다. (돔 작업 아이디어를 뷰에 노출하지 마세요. 전혀 작동하지 않습니다.) 🎜 🎜수요를 분석해 보세요. 사실 이 수요는 앵귤러 모델의 아이디어로 분석됩니다. 이렇게 될 수 있습니다. 🎜 🎜모두 선택 -> 🎜체크박스1 -> A1
확인란 2 -> A2
확인란 3 -> A3
체크박스4 -> A4🎜 🎜A의 모델 값이 (참값)이면 A1-A4model의 값이 (참값)으로 변경된 후 명령어를 실행하면 $digest 루프가 트리거됩니다. 그래서. 모든 확인란을 변경하지 마십시오. 이렇게 하면 $watcher가 생성되지 않습니다. 그리고 모두 선택하겠다는 목표는 달성됐다. 🎜 🎜무심코 작성한 코드를 드립니다:🎜 으아악 으아악 🎜이 경우 말씀하신 두 번째 상황은 발생하지 않습니다.
이 형태는 강력한 확장성을 가지고 있습니다. (시간이 나면 구현할 수 있습니다.) 카테고리 선택을 지원할 수 있습니다. (위의 코드는 임의의 코드입니다.) 🎜 🎜사실 이 질문에 대한 질문자의 가장 큰 혼란은 아마도 DOM 작업을 사용하여 문제를 해결하는 데 익숙하기 때문일 것이라고 생각합니다. 사실 나도 이런 적이 있었다. (저는 아직도 가끔 이 일을 합니다.) 매우 정상입니다. 🎜 🎜====================================🎜 🎜오늘 퇴근 후 구상한 모델을 기반으로 초안 버전을 구현했습니다(양방향 바인딩이 부족하여 자연스럽게 구현됨). 플런커에 올려보세요.
이 버전은 대략적인 초안입니다. ng-true-value, ng-false-value 및 기타 함수와 같은 많은 불완전성이 있습니다. 🎜

Answer 2

개인적으로는 첫 번째 방법은 괜찮은 것 같은데, 두 번째 방법은 좀 복잡한 느낌이 듭니다.