Multiple Nested ui-views with ui-router and AngularJS

Question

I just want to start by saying I looked through as many stack overflow questions related to this issue as I could find and I haven't seen any questions in regards to the issue I'm having. Some are similar, but not really. Here is the issue:

I have the following $stateProvider set up:

$stateProvider.
    state('root', {
        url: '',
        views: {
            'ViewA': {
                templateUrl: 'ViewA.html',
                controller: ViewAController
            },
            'ViewB': {
                templateUrl: 'ViewB.html',
                controller: ViewBController
            },
            'ViewC': {
                templateUrl: 'ViewC.html',
                controller: ViewCContoller
            }
        }
    });

And the following is the index.Html to go along with it:

<head>
    <title>Angular PoC</title>       
</head>
<body ng-controller="DashboardController">
    <!-- Account View for logging in -->
    <div ui-view="ViewA" ng-hide="currentlyLoggedIn"></div>

     <!-- Used to toggle the two main views -->
    <div ng-show="currentlyLoggedIn">
        <button ng-click="activateViewB()"> View B </button> 
        <button ng-click="activateViewC()"> View C </button>
    </div>

    <!-- These are the two main views -->
    <div ui-view="ViewB" ng-show="currentlyLoggedIn && currentViewB"></div>
    <div ui-view="ViewC" ng-show="currentlyLoggedIn && currentViewC"></div>
</body>

This is ViewC.html:

<div>
    This is ViewC
    <div ui-view="ViewCDetails"></div>
</div>

I need to have all ViewA,B,C basically act independently of one another, basically they are each their own state machines. They need to all be in the same view because all three need to keep their state, even when one of the others changes. The biggest issue I am having is that I cannot initialize "ViewCDetails" and I cannot add any states that effect one of the views without hosing the other two views. Is there a way to add states that only effect one of the Views without adversely effecting the other two views? Also to note is that this is supposed to be a SPA, so it is not URL driven.

I am struggling with the same issue. Were you able to resolve the issue? — SLearner
– SLearner, Commented Dec 23, 2013 at 6:38
Is your example genuine or just a way of asking about nested named views? From the example it looks like you only want to show one ui-view at a time. — daddywoodland
– daddywoodland, Commented Dec 27, 2013 at 10:27
Bill, I'm a few months late to the party, but I believe you want Parallel States. Have a look at this discussion: github.com/angular-ui/ui-router/issues/894 on ui-router's GitHub issues page. There is a link to a ui-router fork with parallel support. If this feature is indeed what you need, please add to the discussion on the issues page! — Chris T
– Chris T, Commented Mar 26, 2014 at 13:23

Draculater · Accepted Answer · 2014-01-10 16:58:58Z

43

$stateProvider.
    state('root', {
        url: '',
        views: {
            'ViewA': {
                templateUrl: 'ViewA.html',
                controller: ViewAController
            },
            'ViewB': {
                templateUrl: 'ViewB.html',
                controller: ViewBController
            },
            'ViewC': {
                templateUrl: 'ViewC.html',
                controller: ViewCContoller
            },
            'ViewCDetails@root': {
                templateUrl: 'ViewCDetails.html',
                controller: ...
            }
        }
    });

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

answered Jan 10, 2014 at 16:58

Draculater

2,2971 gold badge25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user133688 Over a year ago

OMG! Rob, I'm not going to lie, I'm a little bit in love with you right now. I'v ebeen trying to get something like this to work for 3 hours! You're awesome.

gmustudent Over a year ago

I wish I could +1 this 100 times! Thank you so much!

PavanSandeep Over a year ago

Why did you put ViewCDetails@root for the last one ? And how do we get something from ViewAController to be used in ViewCController. Like how do scope variables be shared among the views.

Faris Rayhan Over a year ago

this use absolute view

Draculater Over a year ago

@PavanSandeep Services are the solution for sharing data across controllers. Create a Service, and inject as dependency to any controller that needs to share data. The Service's state will persist through all dependents. docs.angularjs.org/guide/services#creating-services

Collectives™ on Stack Overflow

Multiple Nested ui-views with ui-router and AngularJS

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related