I cannot load child router if I am currently in child router and refresh browser

Question

This is my router.

var studentEnroll = {
                name: 'student-enroll',
                label: "Enroll Student",
                url: '^/home/students/enroll',
                params: {
                    studentId: { dynamic: true }
                },
                templateUrl: stateRoute + 'studentEnroll/student-enroll-base.tpl.html',
                controller: 'StudentEnrollCtrl',
                controllerAs: 'studentEnrollController',
                data: {
                    authorizedRoles: ['admin']
                },
                breadcrumbParent: breadcrumbParent
            };
            var enrollSelectStudent = {
                name: 'enroll-select-student',
                label: "Select Student",
                parent: studentEnroll,
                views: {
                    '': {
                        component: "enrollStudentSelect"
                    },
                    'student-info': {
                        templateUrl: stateRoute + 'studentEnroll/step-student/student-info.tpl.html',
                        controller: ''
                    }
                }
            };

I cannot load child router (child template) if I am currently in child router and refresh browser? If I am not in child router, it works correctly.

*"cannot load"* sure isn't a very descriptive problem statement that provides much detail about anything. Please take some time to read [ask] — charlietfl, Jul 25 '17 at 17:03
@charlietfl Cannot load means cannot load child router' template — FullStackDeveloper, Jul 25 '17 at 17:39
that still doesn't explain what does happen, what errors occur, what debugging and error handlers have been used etc — charlietfl, Jul 25 '17 at 19:14

score 0 · Accepted Answer · answered Jul 26 '17 at 14:55

The reason why I cannot load my child router's template because if I am in the child router, when I click element, ui-sref will not work.

<li><a ui-sref="student-enroll({studentId:null})" ng-click="studentController.studentFunction()">Enroll Student</a></li>

So, this is what I did to solve this problem. I use the ForceReload for ui-router.

I removed ui-sref from element. Then I handle the routing in my controller function.

So, my studentFunction() will be:

function studentFunction()
{
   if ($state.current.name !== 'enroll-select-student') {
            $state.go('student-enroll', { studentId: null }, { reload: true });
      }
}

Please check here for more about ForceReload in ui-router.

I cannot load child router if I am currently in child router and refresh browser

1 Answers1