AngularJS:Basic $手表不能正常工作
问题描述:
我试图在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
增量,但手表不火。
答
这是因为你不知道角更新值。
您应该使用$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);
答
它也可能发生,因为div没有注册到控制器。控制器添加到您的股利如下而你的表应该工作:
<div ng-controller="myController">
答
您可以在不$间隔和$超时
$scope.$watch(function() {
return variableToWatch;
}, function(newVal, oldVal) {
if (newVal !== oldVal) {
//custom logic goes here......
}
}, true);
使用setTimeout'的'只是在例子中使用。 '。$ apply()'是我在现实世界中所缺少的。谢谢! – 2013-03-27 17:12:49