Question

我尝试通过$ http定期调用DataService来获取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)
    // ...
}

的DataService：

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没有再次出现？

Answer 1

简短回答你的“为什么？”是，当您传递reactToDataChange($rootScope,$location)这是一个函数调用并返回undefined时，$ watch会将函数作为第二个参数。通过修改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();

Answer 2

试试这个：

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

Answer 3

尝试更改

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);

你可以在不通过rootScope回调的情况下访问jsonData的新值，只需使用第一个参数：

$rootScope.$watch('jsonData', reactToDataChange, true);
....
function reactToDataChange(value) {
    console.log(value);
}

AngularJS定期观看json

3 个答案: