AngularJS-$ watch無法正常工作

Question

這是我的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)
  });

}]);

我以為，三秒鍾后，我會看到：

'changed!'

在我的控制台中。

相反，我只看到：

'hey'

我在index.html中調用我的init（）函數，如下所示：

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

為什么我看到此輸出？

Answer 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沒有看那個事件。 使用angular的$ timeout服務，您可以看到預期的結果。

閱讀有關角度摘要循環和臟檢查的更多信息。