CODEWITHSUNDEEP
angularjsangular-ui-router
leaksterrr
leaksterrr

Reputation: 4167

UI Router update parent view from child

I'm new to using Angular UI Router and I seem to be having difficulty being able to update a parent view from it's child view.

I have the following HTML structure (restructured for easier reading, obviously views are in separate html files).

<div ui-view="main">
    { main content }
    <div ui-view="tab">
        { tabbed content }
    </div>
</div>

Inside tab I have the following sref:

<span ui-sref="silverstone.platforms.view({_id: platform._id})">{{platform.name}}</span>

And here are my states: (I'm using webpack, hence require)

$stateProvider
    .state('silverstone', {
        url: '/silverstone',
        views: {
            'main': {
                controller: 'SilverstoneCtrl',
                template: require('./templates/index.html')
            }
        }
    });

$stateProvider
    .state('silverstone.platforms', {
        url: '/platforms',
        views: {
            'tab': {
                controller: 'SilverstoneCtrl',
                template: require('./templates/platforms.html')
            }
        }
    });

$stateProvider
    .state('silverstone.platforms.view', {
        url: '/:_id',
        views: {
            'main': {
                controller: 'SilverstoneCtrl',
                template: require('./templates/platform-view.html')
            }
        }
    });

When the above sref is clicked, the "main" view needs to be updated. The URL is updating but the views aren't...?

Upvotes: 2

Views: 1854

Answers (2)

tomastrajan
tomastrajan

Reputation: 1726

Use reload: true parameter in yout ui-sref links like this.

ui-sref="silverstone.platforms.view({_id: platform._id})" ui-sref-opts="{reload: true}"

Edit: Maybe your problem are caused by nested states combined with flat template structure. Other solution may be to properly nest your templates, as states. For example we have states app and app.substate, then we have two templates for both states. Tempalte of app state contains ui-view directive. (that means every state contains new ui-view directive for injecting of substate template). States are nested by default, this would represent appropriately nested templates.

Upvotes: 1

leaksterrr
leaksterrr

Reputation: 4167

I was missing @ in my silverstone.platforms.view state to explicitly address the parent view.

$stateProvider
        .state('silverstone.platforms.view', {
            url: '/:_id',
            views: {
                'main@': {
                    controller: 'SilverstoneCtrl',
                    template: require('./templates/platform-view.html')
                }
            }
        });

Upvotes: 3

Related Questions