Question

我正在撤回一些路由依赖数据，并且JSON从服务器返回得很好，但我不确定如何在我的控制器中实际访问该对象。我尝试了一些不同的东西，例如将.then（）置于解析之内，但这不起作用。

resolve: {
            menus: function ($http) {
                var httpSource = this.httpSource = location.protocol + '//' + location.hostname;
                const url = `${this.httpSource}/api/package/menus`;
                return $http.get(url);
            }
        }

我也试过这个

resolve: {
            menus: function ($http) {
                var httpSource = this.httpSource = location.protocol + '//' + location.hostname;
                const url = `${this.httpSource}/api/package/menus`;
                var menuData;
                $http.get(url).then(response => {
                    menuData = response.data.Data;
                })
                return menuData;
            }
        }

我只是无法弄清楚如何将其加载到控制器属性中。

我试图遵循这一点，但变量未在构造函数中注入 - https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c#.2xzq32cwo

我尝试用

加载它

this.menuData = $state.current.resolve.menus;

我最终得到了这个对象。

"$http", function $stateProvider.state.state.resolve.menus($http)]

我确信我在这里缺少一些基本的东西，但是对Angular不熟悉，我看不到它。基本上，我的对象是完整的函数定义，而不是返回data.Data。

我的控制器构造函数。

static $inject = ['PackageService', '$stateParams', '$state', 'menus'];
constructor(packageService: Service.IPackageService, $stateParams, $state, DTOptionsBuilder, DTColumnDefBuilder, public logger: ILogger, public menus: any) {

Answer 1

有a working example

这应该是我们的控制者：

namespace myNamespace 
{
    export class MyController
    {
        public MenuData: any[];

        // strict notation support, for minification
        static $inject = ['$scope', 'menus'];

        // here we will get the resolved menus
        constructor(
            protected $scope: ng.IScope, 
            protected menus: ng.IHttpPromiseCallbackArg<any>)
        {
            this.MenuData = menus.data              
        }       
    }
}

这是我们的州

.state('home', {
      url: "/home",
      templateUrl: 'template.html',
      controller: myNamespace.MyController,
      controllerAs: 'Ctrl',
      resolve: {
       // real example returning some data from data.json
       menus: function ($http) {
         var url = "data.json";
         return $http.get(url);
       }
      }
})

现在我们可以在模板

中使用上述内容

<pre>{{Ctrl.MenuData | json }}</pre>

检查here in action

Answer 2

我并不完全理解你使用决心的方式，但这是我最近做的一个简单例子：

在我的服务中：

    myApp.service('mainService', function ($http, $q) {
    this.getStarWarsData = function() {
    var myPromise = $q.defer();
    $http({
            method: "GET",
            url: "http://swapi.co/api/people/"
         }).then(function(response) {

        var parsedResponse = response.data.results; //Your code will be different here depending on the object you're getting back


        console.log(parsedResponse);
        console.log("this is the type of the pr", typeof(parsedResponse))

        //this bit below is just manipulating the parsed response to obtain the data I wanted
        var emptyArr = [];

        for(var i = 0; i < parsedResponse.length; i++) {
            emptyArr.push({
                Name: parsedResponse[i].name,
                Eyes: parsedResponse[i].eye_color,
            })
        } myPromise.resolve(emptyArr);
    })

    return myPromise.promise;
    }
    })

和控制器

    myApp.controller("myController", ["$scope", "mainService",   function($scope, mainService){
        $scope.getData = function() {
            mainService.getStarWarsData()
                .then(function(response){
                console.log("this is a response in our controller", response)
                $scope.peoples = response;
            })
        }
   }]);

访问控制器

2 个答案: