CODEWITHSUNDEEP
angularjsangular-ui-router
schneck
schneck

Reputation: 10827

UI-Router should only change partial

I'm building an angular application using ui-router, and there's one thing I can't figure out.

There's a sidebar on the left, and a content area. Both are controlled by own controllers. When I choose an item in the sidebar, the content area shall be updated, but the sidebar must remain its state. What it does instead is that the sidebar reloads as well when selected an item.

app.coffee:

$urlRouterProvider.otherwise "/items/near/map"

$stateProvider
.state('items',
    url: '/items'
    abstract: true
    templateUrl: "items.html"
)
.state('items.near',
    url: '/near'
    abstract: true
    views:
        'sidebar@items':
            templateUrl: 'items-near-list.html'
            controller: 'ItemsNearListCtrl'
)
.state('items.near.map',
    url: '/map'
    views:
        'content@items':
            templateUrl: 'items-near-map.html'
            controller: 'ItemsNearMapCtrl'
)
.state('items.near.detail',
    url: '/detail/:id'
    views:
        'content@items':
            templateUrl: 'item-detail.html'
            controller: 'ItemsNearDetailCtrl'
)

items.html:

<div>
    <div ui-view="sidebar"></div>
    <div ui-view="content"></div>
</div>

A probably related problem it that if I enter a detail view state directly (/items/near/detail/x/), the sidebar does not even load anything. Any idea what I'm doing wrong?

Upvotes: 0

Views: 38

Answers (1)

Rob
Rob

Reputation: 5481

Hmm I never used the absolute @ syntax for the view names but after looking into the docs it seems this may be the problem.

Please try without the @items or use the full state/view-combination like [email protected], [email protected] and [email protected].

Upvotes: 0

Related Questions