UI-Router multiple named views not working

Question

I try to use the multiple named view of UI-Router but it's not working.

See following example to understand my problem :

start.html

<body ng-app="startApp">
    <div ui-view="navigation"></div>
    <div ui-view="content"></div>
</body>

nav.html

<nav>
    <ul>
        <li>btn1</li>
        <li>btn2</li>
    </ul>
</nav>

content.html

<h1>My content</h1>

app.js

angular.module('startApp', ['ngAnimate', 'ui.router', 'ngFileUpload', 'ngImgCrop'])

.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('start', {
        url: '/start',
        templateUrl: 'pages/start/start.html',
        controller: 'mainController'
    })

        .state('start.Why', {
        url: '/Why',
        views: {
            'navigation@start': {
                templateUrl: 'pages/start/nav.html'
            },
            'content@start': {
                templateUrl: 'pages/start/content.html'
            }
        }
    })
})

Problem Nothing is display. Nothing is injected in ui-view.. But if my ui-view hasn't name and my id view is '' instead of 'navigation@start' it's work : navigation.html is display..

I try with '@start' and without. I can't explain what is the problem. My js console is clear.

Can you help me, please ?

may be help u http://stackoverflow.com/questions/22175980/angular-ui-router-multiple-views — Hadi J, Feb 29 '16 at 16:05
i already try to put `start` state in abstract and change my start.why url in `/start/Why` with `start`state url in `''` — Kael, Feb 29 '16 at 16:24
http://plnkr.co/edit/TWCQuoIyJRvTb42Z7xxe?p=preview It's a similar problem — Kael, Feb 29 '16 at 16:28

score 2 · Accepted Answer · edited May 23 '17 at 10:32

2

There is a working plunker

What we need here, is to create 'start' state's unnamed view placeholder ui-view="", inside of the index.html:

<body ng-app="startApp">

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

And the start's view will now not contain the ng-app

<!--<body ng-app="startApp">-->
<div>
  <h1>This is a start state view</h1>

  <div>place for child state views</div>
  <hr />
    <div ui-view="navigation"></div>
    <div ui-view="content"></div>
<!--</body>-->
</div>

That is it.. no other change. No root (start) has a target, and child (why) will be properly injected

Observe the current solution in action here

Also check:

Angular UI Router - Nested States with multiple layouts

edited May 23 '17 at 10:32

Community

1
1

answered Mar 01 '16 at 07:03

Radim Köhler

122,561
47
239
335

Yes ! It's working ! But now, in my different state as `start.Why`, my controller is never called.. For example, I have a `ng-click="start()"` button, before use nested views, it works but now, it's not the case... What I miss ? – Kael Mar 01 '16 at 09:00
1

That is the issue parent child.. if your next state e.g. start.Second is navigated from start.Why... parent stays as is - is not.. re-triggered. What you can do is to create special controller on child... I created example for you http://plnkr.co/edit/iZywAbe4DT5Fg0P5a7kW?p=preview – Radim Köhler Mar 01 '16 at 09:54
Great if that helped anyhow ;) Enjoy amazing UI-Router, sir – Radim Köhler Mar 01 '16 at 10:11

score 0 · Answer 2 · answered Feb 29 '16 at 16:10

as link i add for you.try this

  $stateProvider
    .state('start', {
    url: '/start',
    templateUrl: 'pages/start/start.html',
    controller: 'mainController'
})

    .state('start.Why', {
    url: '/Why',
    views: {
        'navigation@start.Why': {
            templateUrl: 'pages/start/nav.html'
        },
        'content@start.Why': {
            templateUrl: 'pages/start/content.html'
        }
    }
})

UI-Router multiple named views not working

2 Answers2

Angular UI Router - Nested States with multiple layouts

Linked