javascript - 为什么我的 var 未定义

Question

我正在尝试获取一个 Rest 数组，然后将其显示在我的 HTML 上。我面临的问题是，在我的工厂中，我能够获取数组并显示其内容，但不能在我的 Controller 中，我总是得到 undefined variable 。这是我的工厂

.factory('coursesService', function($resource) {
                var service = {};
                service.getAllCouses = function (){
                    var Courses = $resource("/myproject/rest/training/trainings");
                    var data = Courses.query().$promise.then(function(data)
                            {
                        service.data= data;
                        console.log("ligne 1: ", service.data[0].name);
                        console.log("ligne 1: ", service.data[0].creator);
                        console.log("ligne 2: ", data[1].name);
                        console.log("ligne 2: ", data[1].creator);
                        return service.data;
                            }); 
                }
                return service;
            })

和我的 Controller

.controller("CoursesController",
            function CoursesController($scope, coursesService) {
                var courses = {};
                courses = coursesService.getAllCouses();
                console.log("courses: ", courses);
            })

结果我得到了这个:

courses:  undefined
ligne 1:  Angular
ligne 1:  Object {id: "1", username: "User1", email: "user1@gmail.com",    password: "password", userProfile: Object}
ligne 2:  JavaScript
ligne 2:  Object {id: "1", username: "User1", email: "user1@gmail.com", password: "password", userProfile: Object}

为什么我收到类(class):未定义？和不应该显示在我在工厂中显示的列表之后吗？

Answer 1

您的 getAllCouses 函数永远不会返回任何内容，因此调用它总是会导致未定义。查询 Promise then 处理程序的回调返回一些内容，但不是 getAllCouses。

您需要让 getAllCouses 返回 Promise，然后使用该 Promise 的 then 处理程序中的结果。您不能直接使用它的返回值，如果 Courses.query() 是异步的(如果不是，为什么它返回一个 promise ？)。

看起来像这样:

.factory('coursesService', function($resource) {
    var service = {};
    service.getAllCouses = function (){
        var Courses = $resource("/myproject/rest/training/trainings");
        var data = Courses.query().$promise.then(function(data) {
            service.data= data;
            console.log("ligne 1: ", service.data[0].name);
            console.log("ligne 1: ", service.data[0].creator);
            console.log("ligne 2: ", data[1].name);
            console.log("ligne 2: ", data[1].creator);
            return service.data;
        }); 
        return data;        // <=== Return the promise (`data` is a bit of a suspect name)
    };
    return service;
})

然后:

.controller("CoursesController", function CoursesController($scope, coursesService) {
    coursesService.getAllCouses().then(function(courses) {   // <=== Use the promise
        console.log("courses: ", courses);                   // <===
    });                                                      // <===
})

...但我不是 Angular 人。