angular.js - angularjs がリンクで dom を操作する際の考慮事項?

Question

リーリー

リンク内のチェックマークを変更してビューに影響を与え、クリックしてすべてを選択する機能を実現できます。
でも実はこんな顔もできるんです

リーリー

次に、ディレクティブのリンクで .checkbox を取得し、jq を使用して最初に p.checkbox を取得し、次に input[type=checkbox]
チェックを入れると、チェックを外すと

と同様になります。

私は 2 番目の解決策を好みます。あまり多くの $watch を生成しないかもしれませんが、2 番目の方法はクラス名を direct に設定することだと思います。
プロパティは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 チェックされた $watchers の数と同じ数があることがわかります。これを行うのは決してベストプラクティスではありません。 🎜 🎜2番目の方法は、あなたが言ったように本当に良くありません（dom操作のアイデアをビューに公開しないでください。まったく機能しません）。 🎜 🎜実際、この需要は角度モデルのアイデアに分析されます。このようなこともあります。 🎜 🎜すべて選択ボタン -> A🎜 🎜チェックボックス1 -> A1
チェックボックス2 -> A2
チェックボックス3 -> A3
チェックボックス4 -> A4🎜 🎜 A のモデルの値が (真の値) の場合、A1 ～ A4 のモデルの値は (真の値) に変更され、命令の実行により $digest ループがトリガーされます。それで。すべてのチェックボックスを変更しないでください。こうすることで $watcher は生成されなくなります。そして全選択という目標は達成されました。 🎜 🎜何気なく書いたコードをあげてください:🎜 リーリー リーリー 🎜この場合、あなたが言及した2番目の状況は起こりません。
この形式は拡張性が高いです。 (時間があるときに実装できます) カテゴリ選択をサポートできます。 (上記は単なるランダムなコードです)。 🎜 🎜実際、この質問に関する質問者の最大の混乱は、おそらく質問者が DOM 操作を使用して問題を解決することに慣れているためだと思います。実は私も昔はそうでした。 （今でも時々これをやります）。とても普通です。 🎜 🎜====================================🎜 🎜今日仕事を終えた後、想定されたモデルに基づいてドラフトバージョンを実装しました（双方向のバインディングを欠いてカジュアルに実装されました）。プランカーに乗せます。
このバージョンはラフドラフトです。 ng-true-value、ng-false-value やその他の関数など、多くの不完全な点があります。 🎜

Answer 2

個人的には、最初の方法は大丈夫だと思いますが、2番目の方法は少し複雑に感じます。