AngularJS:为什么我的控制器得到'undefined'我的服务电话

AngularJS: Why does my controller get 'undefined' from my service call?

本文关键字：我的 undefined 服务电话 为什么 控制器 AngularJS      更新时间：2023-09-26

问题:我的服务正在检索正确的信息，那么为什么我的控制器不能从我的服务获取数据?

Service:这是我的控制器(以及其他东西)调用的代码。

// search.service.js
(function () {
    'use strict';
    angular.
        module('trips').
        factory('SearchService', SearchService);
    SearchService.$inject = ['BoatList'];
    function SearchService(BoatList) {
        var service = {
            getBoatList: getBoatList
        };
        return service;
        //////////////////////
        function getBoatList() {
            BoatList.query()
                .$promise
                .then(function (data) {
                    console.log(data);
                    return data;
                })
                .catch(function (error) {
                    return error;
                })
        }
    }
})();

Console Information:

这就是为什么我这么困惑。服务将Array[7]作为API调用中.then()的一部分记录到控制台。数组包含我想要的数据。由于某些原因，我似乎无法在控制器中访问它。当我用调试器运行它时，我得到'undefined'。

Controller:当我调用与服务的getBoatList相同的代码时，一切工作正常。当我试图访问从activate()返回的数据时，我没有得到任何错误，只是'undefined'。

//search.controller.js
(function () {
    'use strict';
    angular.
        module('trips').
        controller('SearchController', SearchController);
    SearchController.$inject = ['$stateParams', 'SearchService'];
    function SearchController($stateParams, SearchService) {
        var vm = this;
        vm.boatList = null;
        activate();
        ////////////////////
        function activate() {
            vm.boatList = SearchService.getBoatList();
        }
    }
})();

概述:我的服务获取正确的数据并将其记录到控制台。我的控制器没有通过调用服务获得相同的信息。我该如何解决这个问题，是什么误解导致了我的这个问题?

你必须在你的工厂更改方法，因为方法getBoatList应该返回一个承诺。

将您的工厂方法更改为:

function getBoatList() {
   return BoatList.query().$promise;
}

在控制器中，必须将activate方法更改为:

function activate() {
   SearchService.getBoatList()
      .then(function (data) {
         vm.boatList = data;
      })
      .catch(function (error) {
         // do smth on error
      });
}
相关文章：