Работа с различными routeParams в одном контроллере
У меня есть один контроллер, где для каждого отдельного маршрута передаются различные параметры. Мой файл rout.js выглядит следующим образом:
.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;
}
}
})
Я разрешаю параметры маршрута перед загрузкой контроллера. Мои функции контроллера выглядят так:
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);
}
Функция viewQuestion выполняется перед getTheEventDetail, когда я пытаюсь получить доступ к маршруту / событию /:eid/edit-question/:qid, из-за которого dash.eventDetail остается неопределенным, viewQuestion вызывается при инициализации контроллера в представлении edit-question как это.
<div ng-init="eventCtrl.viewQuestion()"></div>
Может быть определенный обходной путь, например, вызов функции viewQuestion внутри конца getTheEventDetail(). Но это приводит к тому, что viewQuestion вызывается каждый раз, когда вызывается getTheEventDetail. В этом случае есть хороший способ работы с routeParams.
1 ответ
Почему бы не использовать сервис $routeParams в вашем контроллере? Похоже, что viewQuestion зависит от метода getEventDetail apiService, который успешно выполняется и устанавливает eventDetail. В этом случае удалите команду ng-init и добавьте вопрос к вашему обратному вызову, чтобы убедиться, что обещание выполнено до вызова метода для данных, которые еще не существуют. Кроме того, фильтр возвращает массив, и, поскольку вы ищете по идентификатору, я предполагаю, что вам может потребоваться один вопрос вместо массива. Если это правильно, вам может потребоваться указать и индекс [0]
в конце или мы Array.find
вместо.
Я не уверен, какой именно результат вы ищете, но я добавил возможное решение ниже (конечно, не проверено). Надеюсь, это поможет.
myApp.controller('eventController', ['$location','$rootScope', routeParams', 'authService', 'apiService',
function ($location,$rootScope, $routeParams,authService, apiService) {
let dash = this;
//get the details of an event
dash.getTheEventDetail = () => {
apiService.getEventDetail(dash.params.eid)
.then(response => {
dash.eventDetail = response.data.data;
if ($routeParams.qid) {
dash.viewQuestion()
}
});
}
dash.getTheEventDetail();
//get the detail of a question for the qid passed as parameter
dash.viewQuestion = () => {
dash.questionDetail =
dash.eventDetail.questions.filter(question => question._id === $routeParams.qid);
console.log(dash.questionDetail);
}
}