I am currently working with an AngularJS module called ui-router and making use of the resolve property to retrieve the id of a specific item.
In another file, I have a component named patent for a state known as patents.patent. This component contains a function that returns the id. My goal is to be able to access this returned id from the controller in order to fetch the relevant data associated with the selected item.
Can someone guide me on how to access the value returned by the resolve function from the controller?
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;
//HERE IS WHERE I NEED TO ACCESS THE RETURNED VALUE
}
});