web-dev-qa-db-fra.com

$ watch ngModel depuis la directive inside en utilisant isolate scope

J'essaie de regarder la valeur de mon modèle de l'intérieur de ma fonction de liaison.

scope.$watch(attrs.ngModel, function() {
       console.log("Changed"); 
    });

Lorsque je modifie la valeur du modèle dans mon contrôleur, la fonction $ watch n'est pas déclenchée.

$scope.myModel = "ACT";

$timeout(function() {
   $scope.myModel = "TOTALS"; 
}, 2000);

Violon: http://jsfiddle.net/dkrotts/BtrZH/4/

Qu'est-ce que j'oublie ici?

javascriptangularjsangularjs-directive
54
Dustin

Le problème est que vous $watching attrs.ngModel qui est égal à "myModel". Vous n'avez pas "myModel" lié dans votre portée. Tu veux $watch "modèle". C'est ce qui est lié au champ d'application de votre directive. Voir http://jsfiddle.net/BtrZH/5/

31
dnc253

Vous aurez besoin de regarder une fonction qui retourne la $ modelValue que vous regardez.

Le code suivant montre un exemple de base:

app.directive('myDirective', function (){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
           scope.$watch(function () {
              return ngModel.$modelValue;
           }, function(newValue) {
               console.log(newValue);
           });
        }
     };
});

Voici un plunker de la même idée en action.

149
Ben Lesh

La bonne façon de faire est:

app.directive('myDirective', function () {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {

        ngModel.$render = function () {
            var newValue = ngModel.$viewValue;
            console.log(newValue)
        };

    }
  };
});
20
Emmanuel

Voici une autre façon de faire ceci:

app.directive('myDirective', function (){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
           attrs.$observe('ngModel', function(value){ // Got ng-model bind path here
              scope.$watch(value,function(newValue){ // Watch given path for changes
                  console.log(newValue);  
              });
           });
        }
    };
});

En procédant de cette façon, vous pourrez écouter les changements de valeur avec des liaisons comme celle-ci.

8
user2978730

Ceci est une extension de la réponse de @ Emmanuel ci-dessus pour répondre à @Martin Velez, bien que je sache qu'il est assez tard! (Aussi, je ne peux pas encore faire de commentaires, donc si ce n'est pas le bon endroit pour ça, désolé!)

Je ne sais pas quelle version de Angular OP utilisait, mais dans Angular # 1.2 + au moins sur la documentation officielle https://docs.angularjs.org/api/ ng/type/ngModel.NgModelController # $ render , $ render est listé comme ceci:

Appelé lorsque la vue doit être mise à jour. Il est prévu que l'utilisateur de la directive ng-model implémentera cette méthode.

La méthode $ render () est invoquée dans les situations suivantes:

$ rollbackViewValue () est appelé. Si nous rétablissons la valeur d'affichage à la dernière valeur validée, $ render () est appelé pour mettre à jour le contrôle d'entrée. La valeur référencée par ng-model est modifiée par programme et les valeurs $ modelValue et $ viewValue sont différentes de la dernière fois. Comme ng-model ne fait pas une surveillance approfondie, $ render () est invoqué uniquement si les valeurs de $ modelValue et $ viewValue sont réellement différentes de leur valeur précédente.

J'interprète cela comme signifiant que la bonne façon de surveiller un ngModel à partir d'une directive est de demander à ngModel et d'implémenter une fonction de lien qui injecte ngModelController. Utilisez ensuite l’API ngModel intégrée à $ render-on-change ($ watch), ou à d’autres activités.

4
RoboBear

Il y a 2 façons de le faire.

1) Vous pouvez utiliser $attrs.[any_attribute] et mettre dessus n'importe quel auditeur

2) Vous pouvez avoir une portée isolée avec une variable 2 manières et définir un écouteur dessus. Si vous en voulez plus, voici un article intéressant

http://www.w3docs.com/snippets/angularjs/bind-variable-inside-angularjs-directive-isolated-scope.html

1
Hazarapet Tunanyan