UI-Router 多个命名视图不起作用 [英] UI-Router multiple named views not working
问题描述
我尝试使用 UI-Router 的多个命名视图，但它不起作用.
请参阅以下示例以了解我的问题:
start.html
<div ui-view="导航"></div><div ui-view="内容"></div>nav.html
content.html
我的内容
app.js
angular.module('startApp', ['ngAnimate', 'ui.router', 'ngFileUpload', 'ngImgCrop']).config(function ($stateProvider, $urlRouterProvider) {$stateProvider.state('开始', {网址:'/开始'，templateUrl: 'pages/start/start.html',控制器:'主控制器'}).state('开始.为什么', {网址:'/为什么'，意见:{'导航@开始':{templateUrl: 'pages/start/nav.html'},'内容@开始':{templateUrl: 'pages/start/content.html'}}})})问题什么都没有显示.在 ui-view 中没有注入任何内容..但是如果我的 ui-view 没有名称并且我的 id 视图是 '' 而不是 'navigation@start' 它的工作:navigation.html 是显示..
我尝试使用 '@start' 和不使用.我无法解释是什么问题.我的 js 控制台很清楚.
你能帮我吗?
我们在这里需要的是创建 'start' 状态的 unnamed view 占位符 ui-view=""，在 index.html 中:
<div ui-view=""></div>并且开始的视图现在将不包含 ng-app
<div><h1>这是一个开始状态视图</h1><div>子状态视图的位置</div><小时/><div ui-view="导航"></div><div ui-view="内容"></div><!--</body>-->就是这样......没有其他变化.没有root(start)有target，child(why)会被正确注入
在此处操作
中观察当前的解决方案还要检查:
Angular UI 路由器 - 具有多种布局的嵌套状态
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 ?
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
这篇关于UI-Router 多个命名视图不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
