angular.js - Beberapa pertimbangan apabila angularjs mengendalikan dom dalam pautan?

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>

Saya boleh menukar ditandakan dalam pautan dan menjejaskan paparan untuk mencapai fungsi mengklik untuk memilih semua,
Tetapi sebenarnya saya juga boleh kelihatan seperti ini

<li select-all boxWrap=".checkbox">全选</li>
<p class="checkbox">
    <input type="checkbox" >
    <input type="checkbox">
    <input type="checkbox">
</p>

Kemudian dapatkan .checkbox dalam pautan arahan dan kemudian gunakan jq untuk mendapatkan p.checkbox dahulu dan kemudian masukkan[type=checkbox]
Setelah ditetapkan untuk diperiksa, apabila dinyahtanda ia serupa dengan

Saya lebih suka penyelesaian kedua, saya rasa ia mungkin tidak menjana terlalu banyak $jam tangan, tetapi saya fikir kaedah kedua ialah menetapkan nama kelas sebagai langsung
Sifat-sifat tersebut nampaknya merupakan cara bulat untuk menggunakan jq.
Adakah terdapat sebarang cadangan yang baik atau cara lain untuk mencapai matlamat ini?

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.