观看角度服务方法

Question

我进入角度，我有以下代码

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 watch语句

我想念什么？

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

我怎么能说角度地运行摘要小柱（因为应该监视的此属性更改了它的值）而没有手动调用apply（这会导致我出现一些错误，因为“ 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/

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

另外，我更新了Controller，因为使用服务的方式似乎很奇怪。

---

参考文献：

• $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;        
});