问题
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 ?
回答1:
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
回答2:
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'
}
}
})
来源:https://stackoverflow.com/questions/35704024/ui-router-multiple-named-views-not-working