从状态解析函数访问返回的数据

Question

我使用AngularJS模块ui-router，并使用resolve属性获取项的id。

在一个单独的文件中，我有一个组件patent，用于状态patents.patent，它具有返回id的函数。我需要从控制器访问返回的id，以便收集与所选项相关的正确数据。

如何从控制器访问resolve函数返回的值？

var app = angular.module('myApp', ['ui.router', 'chart.js']);

app.config(['$stateProvider', function($stateProvider) {

    $stateProvider
    .state('patents', {
        url: '/patents',
        component: 'patents',
        resolve: {
            patents: function(patentsService) {
                return patentsService.fetchAllPatents();
            },
            graphs: function(patentsService) {
                return  patentsService.fetchGraphData();
            }

        }      
    })
    .state('patents.patent', {
        url: '/{patentId}',
        component: 'patent',
        resolve: {
            patent: function(patents, $stateParams) {
                return patents.find(function(patent){ 
                    return patent.id == $stateParams.patentId;
                })
            },
            graph: function(graphs, $stateParams) {
                return graphs.dataset.find(function(graph){
                    return graph.id == $stateParams.patentId; //NEED THIS VALUE
                })
            }
        }
    })

}]);

angular.module('myApp').component('patent', {
    bindings: { 
        patent: '=' ,
    },
    templateUrl: '../templates/patents/list/patent-item.htm',
    controller: function() {
        var vm = this;

        //WHERE I NEED TO ACCESS THE RETURNED VALUE

    }
});

Answer 1

要访问已解析的数据，只需将它们定义为绑定到控制器。就像你已经对patent做过的那样。然后通过您的vm变量(或此)访问它们。

angular.module('myApp').component('patent', {
    bindings: { 
        patent: '<' ,
        graph: '<'
    },
    templateUrl: '../templates/patents/list/patent-item.htm',
    controller: function() {
        var vm = this;

        vm.$onChanges = function(changeObj){
            if(changeObj.patent){
                console.log('I am your patent', vm.patent);
            }
            if(changeObj.patent){
                console.log('I am your graph', vm.graph);
            }
        }
    }
});

正如@rrd建议的那样，您应该保护您的控制器不受小型化的影响，但不仅如此，您还应该保护您的解决函数不受小型化的影响。

就像这样：

resolve: {
    patents: ['patentsService', function(patentsService) {
        return patentsService.fetchAllPatents();
    }],
    graphs: ['patentsService', function(patentsService) {
        return  patentsService.fetchGraphData();
    }]
} 

Answer 2

正如Vivz所指出的，注入控制器应该有效，但您需要确保避免出现小型化问题：

angular.module('myApp').component('patent', {
  bindings: { 
    patent: '=' ,
  },
  templateUrl: '../templates/patents/list/patent-item.htm',
  controller: ['graph', function(graph) {
    var vm = this;

    //WHERE I NEED TO ACCESS THE RETURNED VALUE

  }]
});