$часы не стреляют при изменении данных

У меня есть настройка часов против модели выпадающего списка ui-select2 (из ui-bootstrap). Часы срабатывают при загрузке, но не при изменении данных, и я не могу понять, почему.

Это не обычная проблема не $применить выявим изменения модели или не используя третий параметр для сравнения равенства (по крайней мере из моего кода).

Что мне нужно сделать, чтобы заставить его стрелять?

вот Планк, демонстрирующий проблему.

4 54
angularjs jquery-select2 angular-ui-bootstrap

4 ответа:

я исправил некоторые вещи.

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

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);
});

индекс.HTML-код

  <body ng-app="myApp">
    <div ng-controller="MainController">
      <ng-include src="'detail.html'" ng-controller="DetailController"></ng-include>
    </div>
  </body>

детали.HTML-код

<pre>watch hit: {{watchHitCount}}</pre>
<pre>selected value: {{myModel.selectedId}}</pre>
<select ng-model="myModel.selectedId" ui-select2="">
  <option></option>
  <option ng-repeat="item in items" value="{{item}}">{{item}}</option>
</select>

он жаловался на то, что не нашел контроллер, поэтому я настроил его так, как обычно, с именем ng-app и объявленным модулем, на котором определены контроллеры.

я также добавил объект для хранения значения в вашем модель. не рекомендуется использовать объект $scope в качестве модели, вместо этого ваша область должна ссылаться на объект, который является вашей моделью.

34

попробовать передает true в качестве 3-го аргумента .$watch()

$rootScope.Scope документация

$watch(watchExpression, listener, objectEquality)

objectEquality (необязательно) – {boolean=} - сравнить объект для равенства, а не для ссылки.

116

есть простое исправление для этого, чтобы использовать часы со сложным объектом вместо простой переменной

например (не используйте)

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

но используйте ниже

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

обратите внимание, что" slectedTypes " во втором примере находится внутри объекта, а не только переменной области. это будет работать даже в старых угловых версиях.

12

Если вы используете контроллер-как подход некоторые чтения может предложить синтаксис, как это:

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

вместо этого просто оберните поле в функцию, как это:

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