angulaire.js - Quelques considérations lorsque Angularjs exploite dom en lien ?

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>

Je peux modifier le lien coché et affecter la vue pour obtenir la fonction de cliquer pour tout sélectionner,
Mais en fait je peux aussi ressembler à ça

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

Ensuite, récupérez .checkbox dans le lien de la directive, puis utilisez jq pour obtenir d'abord p.checkbox, puis input[type=checkbox]
Une fois coché, lorsqu'il n'est pas coché, il ressemble à

Je préfère la deuxième solution. Je pense qu'elle ne générera peut-être pas trop de $watches, mais je pense que la deuxième méthode consiste à définir le nom de la classe comme direct
Les propriétés semblent être une manière détournée d'utiliser jq.
Existe-t-il de bonnes suggestions ou d'autres moyens d'y parvenir ?

Answer 1

La première méthode est en fait très mauvaise, car trop de ng-checked générera un grand nombre de $watchers sur le même scope. affecter les performances.

Vous pouvez jeter un œil au code source d'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);
        });
      }
    };
  };
});

Vous pouvez voir qu'il y a autant de $watchers que de ng-checked. Ce n’est certainement pas une bonne pratique de procéder ainsi.

La deuxième méthode n'est vraiment pas bonne comme vous l'avez dit (n'exposez pas l'idée d'opération dom à la vue, cela ne fonctionnera pas du tout).

Analyser la demande. En fait, cette demande est analysée dans l'idée de modèle angulaire. Cela peut être comme ça.

Bouton Sélectionner tout -> A

case à cocher1 -> A1
case à cocher2 -> A2
case à cocher3 -> A3
case à cocher4 -> A4

Lorsque la valeur du modèle de A est (valeur vraie), les valeurs du modèle A1-A4 sont remplacées par (valeur vraie) puis l'exécution dans l'instruction déclenche la boucle $digest ; donc. Ne modifiez pas toutes les cases à cocher. De cette façon, $watcher ne sera pas généré. Et l’objectif de tous sélectionner a été atteint.

Donnez-vous un morceau de code écrit avec désinvolture :

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
    }

}])

Dans ce cas, la deuxième situation que vous avez évoquée ne se produira pas.
Ce formulaire a une forte évolutivité. (Je peux l'implémenter quand j'ai le temps) Il peut prendre en charge la sélection de catégories. (Ce qui précède n’est qu’un code aléatoire).

En fait, je pense que la plus grande confusion de la personne qui pose la question à propos de cette question est peut-être due au fait qu'il est habitué à utiliser les opérations DOM pour résoudre des problèmes. En fait, j’étais comme ça aussi. (Je fais encore ça parfois). Très normal.

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

Après avoir quitté le travail aujourd'hui, j'ai implémenté une version préliminaire basée sur le modèle envisagé (implémenté avec désinvolture, sans liaison bidirectionnelle). Mettez-le sur Plunker.
Cette version est une ébauche. Il existe de nombreuses imperfections, telles que ng-true-value, ng-false-value et d'autres fonctions.

Answer 2

Personnellement, je pense que la première méthode est bonne, mais la deuxième méthode semble un peu compliquée.