$ regarder ne pas tirer sur le changement de données

J’ai une configuration de montre contre le modèle d’une liste déroulante ui-select2 (de ui-bootstrap). La montre se déclenche en charge mais pas sur les modifications de données et je n’arrive pas à comprendre pourquoi.

Ce n’est pas le problème habituel de ne pas appliquer le changement de modèle ou de ne pas utiliser le troisième paramètre pour la comparaison d’égalité (du moins de mon code).

Que dois-je faire pour le faire tirer?

Voici un plunk démontrant le problème.

J’ai réparé des trucs.

http://plnkr.co/edit/5Zaln7QT2gETVcGiMdoW?p=preview

Le JS

var myMod = angular.module("myApp",[]).controller("MainController", function($scope){ $scope.myModel = {selectedId:null}; }).controller("DetailController",function($scope){ $scope.items = [1,2,3,4]; $scope.watchHitCount = 0; $scope.$watch('myModel.selectedId', function(newVal, oldVal){ console.log(newVal + " " + oldVal); $scope.watchHitCount++; },true); }); 

L’index.html

   

Le detail.html

 
watch hit: {{watchHitCount}}
selected value: {{myModel.selectedId}}

Il se plaignait de ne pas trouver le contrôleur, alors je l’ai configuré comme je le ferais normalement avec une application nommée ng et un module déclaré avec des contrôleurs définis.

J’ai également ajouté un object pour conserver la valeur dans votre modèle. Il est déconseillé d’utiliser l’object $ scope en tant que modèle, mais plutôt votre object doit faire référence à un object correspondant à votre modèle.

Essayez de passer true tant que troisième argument à .$watch()

$rootScope.Scope

 $watch(watchExpression, listener, objectEquality) 

objectEquality (optionnel) – {boolean =} – Compare l’object pour l’égalité plutôt que pour la référence.

Il existe une solution simple pour cela: utiliser watch avec un object complexe plutôt qu’une simple variable

Par exemple (DON “T USE)

 $scope.selectedType=1;//default $scope.$watch( function () { return $scope.selectedType; }, function (newValue, oldValue) { if (!angular.equals(oldValue, newValue)) { $scope.DoWork(); } }, true); 

Mais utilisez ci-dessous

 $scope.selecteditem={selectedType:1}; $scope.$watch( function () { return $scope.selecteditem.selectedType; }, function (newValue, oldValue) { if (!angular.equals(oldValue, newValue)) { $scope.DoWork(); } }, true); 

notez que “slectedTypes” dans le deuxième exemple situé à l’intérieur de l’object, pas seulement la variable scope. Cela fonctionnera même dans les anciennes versions angulars.

Si vous utilisez le contrôleur comme approche, certaines lectures peuvent suggérer une syntaxe comme celle-ci:

 var myController = { myValue: 1 }; $scope.$watch('$ctrl.myValue', function () { ... }, true); 

Au lieu de cela, enroulez simplement le champ dans une fonction comme ceci:

 var myController = { myValue: 1 }; $scope.$watch(function () { return myController.myValue; }, function () { ... }, true);