0

我尝试通过定期调用 DataService 来通过 $http 获取 json 文件。

然后我想使用 $watch 功能对任何数据更改做出反应。但是，监视功能永远不会被触发超过一次。为什么？

var app = angular.module('myApp', ['ngRoute']).
    config(['$routeProvider', function ($routeProvider) {
        //...
    }])

    .

    run(function ($rootScope, $timeout, $location, DataService) {

        $rootScope.jsonData = {}

        var delaytime = 10 * 1000;

        $rootScope.jsonData = DataService.getData();

        $timeout(function repeat() {
                console.log("in repeat")
                $rootScope.jsonData = DataService.getData();
                $timeout(function () {
                        console.log("in inner repeat")
                        repeat();
                    }, delaytime
                );
            }, delaytime
        );



        console.log("xxx")
        console.log($rootScope.jsonData)
        $rootScope.$watch('jsonData', reactToDataChange($rootScope, $location));
    })


;


function reactToDataChange($rootScope, $location) {
    console.log("yyy")
    console.log($rootScope.jsonData)
    // ...
}

数据服务：

app.service('DataService', function ($http) {

var data = null;

function setData(newdata) {
    data = newdata;
}

return {

    getData: function () {

        console.log("getting data");

        var rand = "?rand=" + Math.random() * 10000;
        $http.get('data/bla.json' + rand, {cache: false})

            .success(function (newdata) {
                console.log(newdata);
                setData(newdata);
            })
            .

            error(function (data, status, headers, config) {
                console.log("error");
                console.log(status)
            });


        return data;
    }
};
});

控制台显示：

getting data 
xxx
null
yyy
null
new data:[object Object]
Object {bla: Object}
in repeat
getting data
new data:[object Object]
Object {bla: Object}
in inner repeat
in repeat
getting data
new data:[object Object]
Object {bla: Object}
in inner repeat
in repeat
...

为什么yyy不再显示？

4

3 回答 3

1

对您的“为什么？”的简短回答 是 $watch在您传递时将函数reactToDataChange($rootScope,$location)作为第二个参数，这是一个函数调用并返回undefined。通过修改很容易修复它reactToDataChange：

function reactToDataChange($rootScope, $location) {
    return function(){
        console.log("yyy")
        console.log($rootScope.jsonData)
        // ...
    }
}

顺便说一句，您的重复过于复杂。为什么不试试这个：

var rep = function(){
    $timeout(function(){
        $rootScope.jsonData = DataService.getData();
        rep();
    },delaytime);
}
rep();
于 2013-10-04T18:27:01.443 回答
0

试试这个：

$rootScope.$watch('jsonData', reactToDataChange($rootScope, $location), true);
于 2013-10-04T09:36:24.013 回答
0

尝试改变

function reactToDataChange($rootScope, $location) {
    console.log("yyy")
    console.log($rootScope.jsonData)
}

到

function reactToDataChange($rootScope, $location) {
    return function(){
        console.log("yyy")
        console.log($rootScope.jsonData)
    }
}

您应该将true$watch 用作第三个参数，以开始对 jsonData 对象进行“深度观察”：

$rootScope.$watch('jsonData', reactToDataChange($rootScope, $location), true);

您可以访问 jsonData 的新值，而无需将 rootScope 传递给回调，只需使用第一个参数：

$rootScope.$watch('jsonData', reactToDataChange, true);
....
function reactToDataChange(value) {
    console.log(value);
}
于 2013-10-04T10:31:52.973 回答