CODEWITHSUNDEEP
javascriptangularjs
seiksng
seiksng

Reputation: 36

Issue with $rootScope and UI-Router Resolve not persisting

In my app, I am loading a student resource, then I want to access the job resource and retrieve the job details assigned to the student.

How I set up the Student state

.state ('student', {url: '/student/{studentId}', templateUrl: 'partials/student.html', resolve:
    {student: function (Student, $stateParams) {
        return Student.get({id:$stateParams.studentId}).$promise;
    }}, controller: function ($scope, student, $rootScope) {
        $scope.Student = student;
        $rootScope.jobId = $scope.Student.field_313_raw[0].id;
        console.log($rootScope.jobId);
    } })

The view with the job is a child state:

    .state ('student.placement', {url: '/placement', templateUrl: 'partials/student-placement.html', resolve:
        {job: function (Job, $rootScope) {
            return Job.get({id:$rootScope.jobId});
        }},
        controller: function($scope, job) {
            $scope.job = job;
        }
})

If I navigate from my tab to the placements tab, I can get the job details just fine:

XHR finished loading: GET "https://api.knackhq.com/v1/objects/object_10/records/534535affca419b3256c2f4e".

However if I REFRESH the student.placement state, not navigate through the tab, it does not load the $rootScope.jobId so my GET request looks like this:

XHR finished loading: GET "https://api.knackhq.com/v1/objects/object_10/records

I thought I could solve this with the resolve property, hence why it's set up like this now. I thought maybe the rootScope had not been populated prior to making the GET call, but if I console log it, it's showing up BEFORE the GET call:

52cc92ac7431594423002cd4 app.js:37
XHR finished loading: GET "https://api.knackhq.com/v1/objects/object_10/records".

My goal is to be able to load the student's specific job even after a page refresh (for bookmarking purposes)

Any thoughts / suggestions?

Upvotes: 0

Views: 194

Answers (1)

seiksng
seiksng

Reputation: 36

I learned that scopes get rebuilt on page reload and was able to simply load the student object directly to the job resolve.

job: function (Job, student) {
return Job.get({id:student.field_313_raw[0].id});
}

Upvotes: 1

Related Questions