CODEWITHSUNDEEP
javascriptangularjs
Rahul jhawar
Rahul jhawar

Reputation: 237

Dealing with Different routeParams in the same controller

I have a single controller where for each different route diffrent parameters are passed.My routes.js file looks like this-

.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'm resolving the route params before loading the controller. My controller functions looks like this-

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);
    }

The viewQuestion function gets executed before the getTheEventDetail when I try to access the route /event/:eid/edit-question/:qid due to which dash.eventDetail remains undefined the viewQuestion is called on initialization of the controller in the edit-question view like this.

<div ng-init="eventCtrl.viewQuestion()"></div>

There can be certain workaround like calling viewQuestion function inside end of getTheEventDetail().But this cause the viewQuestion to be called everytime when the getTheEventDetail is called.Is there a good way to deal with routeParams in this case.

Upvotes: 1

Views: 58

Answers (1)

Dillon
Dillon

Reputation: 707

Why not use the $routeParams service in your controller instead? It seems that viewQuestion is dependent upon the getEventDetail method of the apiService running successfully and setting the eventDetail. If this is the case remove the ng-init command and add the view question to your call back to ensure that the promise has completed before calling a method on data that doesn't exist yet. Also, filter returns an array, and since you're searching by ID I assume you may want a single question instead of an array. If this is correct you may need to specify and index of [0] at the end or us Array.find instead.

I'm not sure exactly what outcome you're looking for, but I've pasted a possible solution below (untested of course). Hope that helps.

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);
    }            
}

Upvotes: 1

Related Questions