扩展父状态有额外的意见 [英] Extending parent state with extra views
问题描述
是:AngularJS和UI的路由器。
Using: AngularJS and UI-Router.
我想创建一个网页,有两种观点:菜单
和主
。一个为菜单,另一个是为任何内容可能存在。不过,我不希望每次都定义在所有各州两种观点。在菜单
视图不会太经常改变。因此,我创建仅包含菜单
查看父根的状态。其他国家那么从这个派生并添加相应的视图。
I am trying to create a page that has two views: menu
and main
. One is for a menu and the other is for whatever content there may be. However, I do not want to define both views in all states every time. The menu
view will not change too often. So I created a parent 'root' state which contains only the menu
view. The other states then derive from this and add appropriate views.
在code看起来像这样(在文件 app.js
)
The code looks like this (in a file app.js
):
angular
.module('Admin', ["ui.router"])
.config(["$stateProvider", function($stateProvider) {
$stateProvider.state('root', {
abstract: true,
views: {
"menu": {
templateUrl: "../static/partials/menu.html",
controller: "MenuController"
}
}
}).state('root.main', {
url: "",
parent: 'root',
views: {
"main": {
templateUrl: "../static/partials/landing.html",
controller: "MainController"
}
}
}).state('root.login', {
url: "/login",
parent: 'root',
views: {
"main": {
templateUrl: "../static/partials/login.html",
controller: "LoginController"
}
}
})
;
}])
.controller('MainController', ["$scope", "$http", mainController])
.controller('MenuController', ["$scope", "$http", menuController])
.controller('LoginController', ["$scope", "$http", loginController])
;
其结果是,只有菜单
视图。在不显示主
视图,除非我也把它添加到根
状态。任何人都知道什么是错的?
The result is that only the menu
view is displayed. The main
view is not displayed, unless I also add it to the root
state. Anyone know what is wrong?
修改
这包含视图的HTML:
The HTML that contains the views:
<div ng-app="Admin">
<a ui-sref="root.main">Click me</a>
<div class="ui menu" ui-view="menu"></div>
<div class="ui segment">
<div ui-view="main"></div>
</div>
<br>
</div>
<script src="{{ url_for('static', filename='js/menu.js') }}"></script>
<script src="{{ url_for('static', filename='js/main_controllers.js') }}"></script>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
编辑2
有一个类似的问题在这里: UI-路由器继承的意见,但这并不工作对我来说...
There is a similar question here: UI-Router inheriting views, but this does not work for me...
编辑3
我设法在plnkr很干脆重现此: http://plnkr.co /编辑/ uYlFgsvq8hQHON8EESEx?p = preVIEW
I managed to very simply reproduce this in plnkr: http://plnkr.co/edit/uYlFgsvq8hQHON8EESEx?p=preview
推荐答案
刚刚有同样的问题,发现使用plnkr解决方案。您需要将@添加到视图名称如下图所示。
Just had the same problem and found the solution using your plnkr. You need to add the '@' to the view name as shown below.
.state('root.main', {
url: "",
parent: 'root',
views: {
"main@": {
templateUrl: "../static/partials/landing.html",
controller: "MainController"
}
}
})
这篇关于扩展父状态有额外的意见的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!