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

正如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

  }]
});

Answer 2

要访问已解析的数据，只需将它们定义为与控制器的绑定即可。就像你已经使用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();
    }]
}

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

2 个答案: