javascript - Angular/Controller 加载 json 文件失败，出现我无法理解的异常

Question

抱歉，也许是一个愚蠢的问题，但我仍然是 Angular 新手。

代码:

-- 编辑 #2 -- ----- ----- ----- ----- ----- ----- -----

MyApp.controller('DataController', ['$http', function ($http) {

        var self = this;

        var objects = [];
        var loaded = false;

        var getObjects = function () {
            if(!loaded){
                setRawObjects();
            }
            return objects;
        };

        var setRawObjects = function(){
            $http.get('data/objects.json').success(function (response) {
                loaded=true;
            });
        }

        var openDetail = function () {
            console.log('test');
        }

        self.getObjects = getObjects;
        self.openDetail = openDetail;
    }]);

-- 编辑 #2 结束 -- ----- ----- ----- ----- ----- -----

错误:

Error: [$rootScope:infdig] http://errors.angularjs.org/1.5.5/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.js:38
    at n.$digest (angular.js:17111)
    at n.$apply (angular.js:17337)
    at angular.js:1749
    at Object.invoke (angular.js:4665)
    at c (angular.js:1747)
    at yc (angular.js:1767)
    at ee (angular.js:1652)
    at angular.js:30863
    at HTMLDocument.b (angular.js:3166)

angular.js:38Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.5.5/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.js:38
    at n.$digest (angular.js:17111)
    at n.$apply (angular.js:17337)
    at angular.js:1749
    at Object.invoke (angular.js:4665)
    at c (angular.js:1747)
    at yc (angular.js:1767)
    at ee (angular.js:1652)
    at angular.js:30863
    at HTMLDocument.b (angular.js:3166)

抛出两次异常。我无法想象这意味着什么，有什么问题吗？这行似乎诅咒了这个问题:

return $http.get('data/objects.json').success(function(response) {

Controller 正在以这种方式启动:

EspanioApp.controller('DataController', ['$http', function ($http) {...

您对我如何解决这个问题有任何提示吗？

cu n00n

Answer 1

这是错误:

$rootScope:infdig (Infinite $digest Loop)

This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle. Angular detects this situation and prevents an infinite loop from causing the browser to become unresponsive.

可能setRawObjects是以不太正确的方式绑定(bind)的。

此外，我不太确定您如何处理 setRawObjects 返回的内容:我会验证它返回的内容 - 可能是 promise ，应该异步处理，因此直接 html 绑定(bind)无法正确处理它。

例如，如果您在控制台上打印返回，您会发现对象是未定义，而响应是not，表示return是在success回调之前执行的:

setRawObjects = function(){
    return $http.get('data/objects.json').success(function(response) {
        console.log(response);
        objects = response.objects;
        loaded = true;
    });
}

var getObjects = function () {
    console.log(loaded);
    if(!loaded){
        setRawObjects();
    }
    console.log(objects);
    return objects;
};

因此，不绑定(bind)函数，而是直接绑定(bind)对象:

MyApp.controller('DataController', ['$http', function ($http) {
    var self = this;
    self.objects = [];

    $http.get('data/objects.json').success(function (response) {
        console.log(response);
        self.objects = response;
    });
}]);

Angular 将观察它是否已更新，并且也会更新 View 。