Question

我正在尝试让控制器在使用时从服务器检索其数据，但由于某种原因，这看起来无法正常工作：

app.controller('eventListController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    var eventList = this,
        getEventList = function () {
            var promise = $http.get('../json/Login.json');
            promise.then(function (response) {
                eventList = response.data;
            }, function (error) {
                window.alert('Error' + error);
            });
        };

    getEventList();
}]);

看起来非常简单，但eventList无法正确加载

我做错了什么？

这里大致是JSON的样子

{
"eventHead": [
    {
        stuff stuff
    },
    {
         more stuff
    }
],
"success": true

}

如果我做了

window.alert(eventList);

之后

getEventList();

我得到[object Object]，看似正常

但如果我这样做

window.alert(eventList.success);

我未定义

此外我的数据不会加载到页面

Answer 1

您不希望用this（您的控制器）覆盖结果中的引用（编辑：我的意思是，您不再引用控制器，而只是引用控制器数据 - 在视图中无法访问）。你想在控制器上设置一个属性 - 我认为你使用controller as语法？这样可以更好地完成我认为你想要实现的目标：

app.controller('eventListController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    var that = this;

    var getEventList = function () {
        var promise = $http.get('../json/Login.json');
        promise.then(function (response) {
            that.eventList = response.data;
        }, function (error) {
            console.log('Error', error);
        });
    };

    getEventList();
}]);

编辑：我已经多次指出，上面的（问题）语法是正确的。我同意 - 这只是不好的做法。您不应该使用和换行定义多个变量。我想大多数javascript开发人员会同意它不会增加可读性（我认为我误读了它证明了这一点）。

Answer 2

您的问题实际上已在以下问题中得到充分描述：How do I return the response from an asynchronous call?

调用window.alert(eventList);确实会返回[object Object]，因为您已将其分配给eventList = this。

函数getEventList()是异步的，因此响应不会立即可用。你可以这样做：

var getEventList = function (callback) {
    var promise = $http.get('../json/Login.json');
    promise.then(function (response) {
        eventList = response.data;
        callback(eventList);
    }, function (error) {
        window.alert('Error' + error);
    });
};

getEventList(function(response) {
    console.log(response.success);
});

但请看看我上面提到的答案并查看how to use Promises in Angular。

Answer 3

赞美Per Hornshoj-Schierbeck和Martin让我走向正确的方向，这似乎有效

app.controller('eventListController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    var events= this;

    var getEventList = function () {
        var promise = $http.get('../json/Login.json');
         promise.then(function (response) {
            events.eventList = response.data;
        }, function (error) {
            window.alert('Error' + error);
        });
     };

    getEventList();
}]);

我希望语法是好的做法，如果不是很高兴接受任何建议

AngularJS控制器无法加载数据

3 个答案: