AngularJS - $ watch没有按预期工作

时间:2016-02-15 06:06:54

标签: javascript angularjs output angular-digest

这是我的app.js

var MyApp = angular.module('MyApp', []);

MyApp.controller('MyController', ['$scope', function($scope){

  $scope.watchMe = 'hey';

  $scope.init = function() {
    setTimeout(function() {
      $scope.watchMe = 'changed!';
    }, 3000)

  };

  $scope.$watch('watchMe', function() {
     console.log($scope.watchMe)
  });

}]);

我想,3秒钟后,我会看到:

'changed!'

在我的控制台中。

相反,我只是看到了:

'hey'

我在index.html中调用我的init()函数,如下:

<div ng-controller="MyController"  ng-init="init()">

为什么我看到这个输出?

1 个答案:

答案 0 :(得分:1)

var MyApp = angular.module('MyApp', []);

MyApp.controller('MyController', ['$scope', '$timeout', function($scope, $timeout){

  $scope.watchMe = 'hey';

  $scope.init = function() {
  $timeout(function() {
      $scope.watchMe = 'changed!';
  }, 500);

  };

  $scope.$watch('watchMe', function(newVal, oldVal) {
     console.log(newVal);
  });

}]);

您正在使用setTimeout方法。 Angular并没有关注那个事件。使用$ timeout service of angular然后你可以看到预期的结果。

了解更多细节,了解角度摘要循环和脏检查。