2013-03-27 26 views
17

我試圖在AngularJS中設置一個手錶,而且我顯然做錯了什麼,但我無法弄清楚。手錶在即時頁面加載時觸發,但是當我改變觀看值時它不會觸發。爲了記錄,我還設置了一個匿名函數的手錶來返回監視的變量,但我有完全相同的結果。

我已經在下面設置了一個簡單的例子,在控制器中做所有事情。如果它有所作爲,我的實際代碼就會被嵌入到指令中,但兩者都以相同的方式失敗。我覺得有一些基本的東西我錯過了,但我只是沒有看到它。

HTML:

<div ng-app="testApp"> 
    <div ng-controller="testCtrl"> 
    </div> 
</div> 

JS:

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

function testCtrl($scope) { 
    $scope.hello = 0; 

    var t = setTimeout(function() { 
     $scope.hello++; 
     console.log($scope.hello); 
    }, 5000); 

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

超時工作,hello增量,但手錶不火。

演示在http://jsfiddle.net/pvYSu/

回答

40

這是因爲你不知道角更新值。

您應該使用$timeout服務而不是setTimeout,您不需要擔心該問題。

function testCtrl($scope, $timeout) { 
    $scope.hello = 0; 

    var t = $timeout(function() { 
     $scope.hello++; 
     console.log($scope.hello); 
    }, 5000); 

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

或者你可以調用$ scope。$ apply();強制角度重新檢查值並在必要時調用手錶。

var t = setTimeout(function() { 
    $scope.hello++; 
    console.log($scope.hello); 
    $scope.$apply(); 
}, 5000); 
+7

使用setTimeout'的'只是在例子中使用。 '。$ apply()'是我在現實世界中所缺少的。謝謝! – 2013-03-27 17:12:49

0

它也可能發生,因爲div沒有註冊到控制器。控制器添加到您的股利如下而你的表應該工作:

<div ng-controller="myController"> 
0

您可以在不$間隔和$超時

$scope.$watch(function() { 
      return variableToWatch; 
     }, function(newVal, oldVal) { 
      if (newVal !== oldVal) { 
       //custom logic goes here...... 
      } 
     }, true);