UI-Router多个命名视图不起作用 [英] UI-Router multiple named views not working
问题描述
我尝试使用UI-Router的多重命名视图，但是它不起作用.
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'
}
}
})
})
问题
什么都没显示.不会在ui视图中注入任何东西.
但是，如果我的用户界面视图没有名称，而我的id视图是''而不是'navigation@start'，则可以正常工作:显示 navigation.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..
我尝试使用'@start'，不使用.我无法解释是什么问题.我的js控制台很清楚.
I try with '@start' and without. I can't explain what is the problem. My js console is clear.
可以帮我吗?
推荐答案
我们在这里需要的是在index.html中创建'start'状态的未命名 视图占位符ui-view="":
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>
并且开始的视图现在将不包含ng-app
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
还要检查:
这篇关于UI-Router多个命名视图不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
