web-dev-qa-db-fra.com

angular déclencher des changements avec $ watch vs ng-change, ng-vérifié, etc.

Actuellement, nous pouvons surveiller les modifications des données de plusieurs manières. Nous pourrions déclencher des changements de modèle avec $watch et nous pourrions ajouter des directives aux éléments et y lier quelques actions.

C'est un peu déroutant dans de nombreux cas, donc je suis curieux de savoir quel est le pour et le contre de chaque variante et quand devrions-nous utiliser $watch contraignant, et lorsque des directives comme ng-change?

javascriptangularjsangularjs-directive
49
Ph0en1x

Tous les deux $watch et ngChange ont des utilisations totalement différentes:

Disons que vous avez un modèle défini sur une étendue:

$scope.myModel = [
    {
        "foo":"bar"
    }
];

Maintenant, si vous voulez faire quelque chose chaque fois que des changements se produisent dans myModel, vous utiliserez $watch:

$scope.$watch("myModel", function(newValue, oldValue){
    // do something
});

ngChange est une directive qui évalue une expression donnée lorsque l'utilisateur modifie l'entrée:

<select ng-model="selectedOption" ng-options="option for option in options" 
ng-change="myModel=selectedOption"></select>

En bref, vous lieriez normalement ngChange à un élément HTML. Tandis que $watch est pour les modèles.

61
AlwaysALearner

Code de la directive ngChange:

var ngChangeDirective = valueFn({
  require: 'ngModel',
  link: function(scope, element, attr, ctrl) {
    ctrl.$viewChangeListeners.Push(function() {
      scope.$eval(attr.ngChange);
    });
  }
});

Devinez quoi, ngChange nécessite un contrôleur de ngModel et exécute l'expression liée lorsque la vue est modifiée.

C'est donc comme un assistant qui vous évite de faire des tâches fastidieuses comme [$ watch 'model' then do stuff].

Du point de vue des performances, vous en avez un de moins $watch expression inquiétante.

16
6220119

Des directives comme ng-change sont utilisés pour la liaison de données au DOM. $watch est utilisé dans votre code JS pour écouter les modifications.

Lorsque vous avez besoin que le DOM soit affecté par un changement dans votre portée, ou que vous ayez besoin qu'un changement dans le DOM (par exemple, la sélection de champ) affecte la portée, vous utilisez une directive.

Si vous devez déclencher des actions JavaScript à partir d'un changement de portée, par exemple une demande ajax, vous utiliserez $watch dans votre contrôleur (ou service) pour écouter le changement.

8
Jani Hartikainen

Si vous souhaitez une liaison de données bidirectionnelle, utilisez ng-model. Cela pousse les modifications du modèle à la vue et de la vue au modèle - de deux manières. Cependant, si vous souhaitez simplement une liaison de données à sens unique de la vue au modèle, utilisez ng-change. Si vous souhaitez une simple liaison de données unidirectionnelle du modèle vers la vue, vous pouvez utiliser une expression {{ like_this }}. Mais si vous voulez beaucoup plus de contrôle sur la façon dont le modèle est rendu dans la vue, ou si vous voulez lier le modèle à autre chose que la vue, utilisez un $watch.

2
John Henckel