Issue with refreshing page

Question

Having problem with my angular app, when I refresh page it doesn't show me correct page. It looks like the way I pass parameter to the page is not right.

So I have my state in the ui-router:

.state('stateDashboard', {
                    url: '/dashboard',
                    templateUrl: '/templates/dashboard.html',
                    controller: 'dashboardController'
        })

In the page where I have list of Dashboards:

<div class="tile" ng-repeat="d in dashList" ng-class="[d.tileColour, d.tileSize]" ui-sref="stateDashboard" ng-click="setDashboard(d.id)">
    <div class="tile-body">
        <i class="fa fa-dashboard"></i>
    </div>
    <div class="tile-object">
        <div class="name">
            {{d.name}}
        </div>
    </div>
</div>

where setDashboard(id) sett id to $rootScope.dashId

and in my controller to display dashboard I have:

Dashboards.getDashboard({ id: $rootScope.dashId }).$promise.then(function (result) {
        $rootScope.model = result;
     }

So now when I refresh the page $rootScope.dashId is undefined so doesn't display page correctly. How can I fix it?

Answer 1

Add your dashId to the URL so you can pass it when changing dashboard and/or refreshing the page. So avoid calling setDashboard because it will only have effect until you reload the page.

.state('stateDashboard', {
                    url: '/dashboard/:dashId',
                    templateUrl: '/templates/dashboard.html',
                    controller: 'dashboardController'
        })

Now inside your controller you can get it like this. No need to use the $rootScope.

Dashboards.getDashboard({ id: $stateParams.dashId }).$promise.then(function (result) {
        $rootScope.model = result;
     }