访问控制器中的解析对象

Question

我正在拉回一些依赖于路由的数据，并且 JSON 从服务器 return 编辑得很好，但我不确定一旦我在我的控制器中如何实际访问该对象。我尝试了一些不同的方法，例如将 .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 的新手，我没有看到它。基本上，我的对象是完整的函数定义，而不是 return data.Data.

我的控制器构造函数。

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

Answer 1

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

在我的服务中：

    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;
            })
        }
   }]);

Answer 2

有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

访问控制器中的解析对象

Accessing resolve object in controller

state

angularjs

typescript

angular-ui

angular-ui-router