观看角度服务方法

Question

我进入 Angular 并且我有以下code

html

<div ng-controller="Ctrl">
    <p>{{val}}</p>
</div>

javascript

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

app.service('testService', function(){
    var myVal = new Date();

    this.val = function(){
        return myVal;
    };

    setInterval(function () { myVal = new Date(); console.log(myVal);}, 3000);
});

function Ctrl($scope, testService)
{
    $scope.testService = testService;
    $scope.val = testService.val();
    $scope.$watch('testService.val()', function (newVal) {
        $scope.val = newVal;        
    });

}

但是即使 setInterval 正在执行它也不会触发 Ctrl 监视语句

我错过了什么？

编辑：当我想到更改 myVal 属性的最简单机制时，我认为一些答案集中在 setInterval 函数上。在我的真实应用程序中，这个值被织物 JS（画布库）事件更改。

我怎么能说 angular 运行一个摘要 cicle（因为这个应该被监视的属性改变了它的值）而不手动调用 apply （这导致我出现一些错误，因为“应用程序已经在处理中”或其他东西

我试图通过演示来简化我的问题，但如果不清楚，我很抱歉

Answer 1

并不是说我完全理解 AngularJS，但我相信 setInterval 不会导致 Angular 运行摘要循环，这会导致 $watch 看到变化。使用$timeout，你可以得到你想要的。以下是我如何设置您的服务的示例：

app.service('testService', function ($timeout) {
    var myVal = new Date();

    this.val = function(){
        return myVal;
    };

    updateVal();

    function updateVal() {
        myVal = new Date();
        console.log(myVal);
        $timeout(updateVal, 1000);
    }
});

演示： http://jsfiddle.net/LuNqX/

演示的超时时间更短，以便更好地查看更改。

另外，我更新了控制器，因为服务的使用方式看起来很奇怪。

---

参考资料：

• $timeout - http://docs.angularjs.org/api/ng/service/%24timeout

Answer 2

$watch 正在查看范围。您要求它观看不起作用的 $scope['testService.val()']。您可以使用函数作为第一个参数并返回该值。

$scope.$watch(function() { return testService.val(); } , function (newVal) {
    $scope.val = newVal;        
});