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

Kaedah pertama sebenarnya sangat buruk, kerana terlalu banyak ng-check akan menjana sejumlah besar $watchers pada skop yang sama. menjejaskan prestasi.

Anda boleh melihat kod sumber sudut 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);
        });
      }
    };
  };
});

Anda dapat melihat bahawa terdapat sebanyak $pemerhati seperti yang disemak. Ia pastinya bukan amalan terbaik untuk melakukan ini.

Kaedah kedua benar-benar tidak baik seperti yang anda katakan (jangan dedahkan idea operasi dom kepada paparan, ia tidak akan berfungsi sama sekali).

Analisis permintaan Sebenarnya, permintaan ini dianalisis ke dalam idea model sudut. Boleh jadi macam ni.

Pilih semua butang -> A

kotak pilihan1 -> A1
kotak semak2 -> A2
kotak semak3 -> A3
kotak semak4 -> A4

Apabila nilai model A ialah (nilai sebenar), nilai model A1-A4 ditukar kepada (nilai sebenar); maka pelaksanaan dalam arahan mencetuskan gelung $digest. jadi. Jangan tukar semua kotak pilihan. Dengan cara ini $watcher tidak akan dijana. Dan matlamat untuk memilih semua tercapai.

Beri anda sekeping kod yang ditulis secara santai:

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
    }

}])

Dalam kes ini, situasi kedua yang anda nyatakan tidak akan berlaku.
Borang ini mempunyai kebolehskalaan yang kuat. (Saya boleh melaksanakannya apabila saya mempunyai masa) Ia boleh menyokong pemilihan kategori. (Di atas hanyalah kod rawak).

Sebenarnya, saya rasa kekeliruan terbesar penyoal tentang soalan ini mungkin kerana dia sudah biasa menggunakan operasi DOM untuk menyelesaikan masalah. Sebenarnya saya juga pernah begini. (Saya masih melakukan ini kadang-kadang). Sangat biasa.

================================================================

Selepas keluar kerja hari ini, saya melaksanakan versi draf berdasarkan model yang dibayangkan (dilaksanakan secara santai, tiada pengikatan dua hala). Letakkan pada Plunker.
Versi ini adalah draf kasar. Terdapat banyak ketidaksempurnaan, seperti ng-true-value, ng-false-value dan fungsi lain.

Answer 2

Saya secara peribadi merasakan bahawa kaedah pertama adalah baik, tetapi kaedah kedua terasa agak rumit.