AngularJS UI Router Update Sibling View

Question

I am working with angular and using ui router. The structure of my views are something like this:

<div ui-view>
    <div ui-view="left">
        -- list of items
    </div>
    <div ui-view="right">
        -- details of item
    </div>
</div>

Now if i select an item from left panel, an api is called to get the details of that item. Now want to load that information in right view.

All the view states have their own controller. Can someone please help me to pass the returned data from api tosecond view?

you can use $service to get the data from database and then inject it to other controller where you want to render. We can communicate between controller via $service, $factory etc. in angular. — MukulSharma
– MukulSharma, Commented Aug 30, 2016 at 0:24

plong0 · Accepted Answer · 2016-08-30 04:13:40Z

This is a pretty straightforward and common use case with ui-router. The main concept is of nested states and multiple named-views.

I would set this up with some states that look something like:

$stateProvider
    .state('user', {
        url: '/user',
        views: {
            'left': {
                templateUrl: '/templates/states/user-list.tpl.html'
            },
            'right': {
                template: '<p>This is default content that would appear in the right view until a user is selected.  This is nice, but is completely optional.</p>'
            }
        }
    })
    .state('user.details', {
        url: '/:userId',
        views: {
            'right': {
                templateUrl: '/templates/states/user-details.tpl.html'
            }
        }
    });

In the user-list template, you would use links something like:

<a ui-sref="user.details({userId: user.id})">{{user.name}}</a>

Because user.details is a child state of user, the user-list stays loaded into the left view while navigating through different users in the right view.

Collectives™ on Stack Overflow

AngularJS UI Router Update Sibling View

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related