In my development project, I have a unique setup where a single controller handles different routes with varying parameters. Here's a snippet from my routes.js file:
.when('/event/:eid/edit-question/:qid', {
templateUrl: 'views/edit-question.html',
controller: 'eventController',
controllerAs: 'eventCtrl',
resolve: {
"check": function (authService, $location) {
if (!authService.isLoggedIn()) {
$location.path('/login');
}
},
"params": function ($route) {
return $route.current.params;
}
}
})
.when('/event/edit-event/:eid', {
templateUrl: 'views/edit-event.html',
controller: 'eventController',
controllerAs: 'eventCtrl',
resolve: {
"check": function (authService, $location) {
if (!authService.isLoggedIn()) {
$location.path('/login');
}
},
"params": function ($route) {
return $route.current.params;
}
}
})
I've implemented logic to resolve the route params before loading the controller. Inside my controller, the functions are structured as follows:
myApp.controller('eventController', ['$location','$rootScope', 'params', 'authService', 'apiService', function ($location,$rootScope, params,authService, apiService) {
let dash = this;
//all the route parameters will be resolved and stored here
dash.params = params;
//get the details of an event
dash.getTheEventDetail = () => {
apiService.getEventDetail(dash.params.eid).then(function successCallBack(response){
console.log(dash.params.eid);
dash.eventDetail = response.data.data;
});
}
dash.getTheEventDetail();
//get the detail of a question for the qid passed as parameter
dash.viewQuestion = () => {
console.log(dash.params.qid);
console.log(dash.eventDetail);
dash.questionDetail = dash.eventDetail.questions.filter(question => question._id === dash.params.qid);
console.log(dash.questionDetail);
}
However, I encountered an issue where the viewQuestion function gets executed before getTheEventDetail when accessing the route /event/:eid/edit-question/:qid, leading to dash.eventDetail remaining undefined. The call to viewQuestion occurs on initialization of the controller in the edit-question view like this.
<div ng-init="eventCtrl.viewQuestion()"></div>
I've considered calling the viewQuestion function at the end of getTheEventDetail() as a workaround, but this would result in viewQuestion being triggered every time getTheEventDetail is called. Any suggestions on a better approach to handle routeParams in this scenario?