问题描述
我的应用程序中有 2 个 ui-view
指令.一个包含子导航,另一个是实际的页面内容.我的子导航是一个树形结构,当您单击一个结束节点(或叶子)时,应该是内容视图唯一更新的时间.每当您单击子导航中的非叶子节点时,我希望内容视图在子导航视图更改时保持不变.
I have 2 ui-view
directives in my application. One contains subnavigation and the other is the actual page content. My subnavigation is a tree structure, and when you click on an end node (or a leaf) should be the only time the content view gets updated. Whenever you click non-leaf nodes in the subnavigation, I would like the content view to stay the same while the subnavigation view changes.
发生的情况是,每当我切换到未定义其中一个视图的状态时,视图就会被清除.我希望它保持在我改变状态之前的状态.有人做到了吗?
What is happening is whenever I switch to a state that does not define one of the views, the view gets cleared out. I want it to stay how it was previous to me changing state. Has anyone accomplished this?
代码:
<!--NOTE THAT THESE ARE SIBLING ELEMENTS, NOT NESTED -->
<div id="subNav" ui-view="subNav"></div>
<div id="content" ui-view="content"></div>
这是我的路线设置.请注意,State1 应该只更新 subnav
视图,State2 应该只更新 content
视图.
Here is my route setup. Note that State1 only should update the subnav
view and State2 should only update the content
view.
$stateProvider
.state('State1', {
url: '/State1',
views: {
"subnav": {
templateUrl: "views/subnav.html",
controller: "SubNavController"
}
}
})
.state('State2', {
url: '/State2',
views: {
"content": {
template: "<p>State 2</p>"
}
}
});
这是当前正在做的事情的 plnkr:http://plnkr.co/编辑/TF7x5spB8zFLQPzrgZc9?p=preview
Here is a plnkr of what is is currently doing: http://plnkr.co/edit/TF7x5spB8zFLQPzrgZc9?p=preview
推荐答案
我想说,这里的路真的很明确:
I would say, that the way to go here is really very clear:
我正在使用这种技术,在非常相似的场景中:左列是一个列表,右列(大区域) 是一个细节的地方.有一个例子
I am using this technique, in very similar scenario: left column is a list, right (large area) is a place for a detail. There is an example
状态定义为:
$stateProvider
.state('index', {
url: '/',
views: {
'@' : {
templateUrl: 'layout.html',
controller: 'IndexCtrl'
},
'top@index' : { templateUrl: 'tpl.top.html',},
'left@index' : { templateUrl: 'tpl.left.html',},
'main@index' : { templateUrl: 'tpl.main.html',},
},
})
.state('index.list', {
url: '/list',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('index.list.detail', {
url: '/:id',
views: {
'detail@index' : {
templateUrl: 'detail.html',
controller: 'DetailCtrl'
},
},
})
所以在我们的例子中,它可能是这样的:
So in our case, it could be like this:
- 父状态将具有两个状态(布局)的模板,并且还将注入导航栏
- 孩子只会将视图注入主区域
父状态:
.state('State1', {
url: '/State1',
views: {
"bodyArea" { template: "body.thml"},
"subnav@State1": {
templateUrl: "views/subnav.html",
controller: "SubNavController"
}
}
})
所以我们可以看到,两种状态的模板,布局都定义在 State1
上,作为放置在bodyArea"中的视图.
So what we can see, the template for both states, the layout is defined on the State1
as a view placed in "bodyArea".
另一个视图(原始)通过绝对名称subnav@State1"注入到该模板中.IE.为一个父状态定义了 2 个视图...
The other view (original) is injected into that template, via absolute name "subnav@State1". I.e. 2 views defined for one parent state...
子状态:
.state('State2', {
parent: 'State1', // a child needs parent
url: '/State2',
views: {
"content": {
template: "<p>State 2</p>"
}
}
})
在这里,我们只是说,State1 是 State2 的父级.这意味着,内容"目标/锚 (ui-view="content"
) 必须是 State1 中定义的视图的一部分.这里最好的地方是body.html"...
Here, we just say, that State1 is parent of State2. That means, that the "content" target/anchor (ui-view="content"
) must be part of the views defined in State1. The best place here would the "body.html"...
EXTEND:基于评论和 这个 plunker 有一些问题,我创建了它的 更新版本.Main1 的导航已损坏(以便能够进行比较),但 Main2 和 Main3 正在工作.
EXTEND: based on comments and this plunker with some issues, I created its updated version. Navigation to Main1 is broken (to be able to compare), but Main2 and Main3 are working.
- Main2 正在工作,因为它的 def 与
index
状态 相似另一方面, - Main3 是
index
状态的子节点
- Main2 is working because it has the similar def as
index
state - Main3 is on the other hand child of the
index
state
从这段代码中可以清楚地看出绝对和相对命名:
The absolute and relative naming in action should be clear from this snippet:
索引:
$stateProvider
.state('index', {
url: '/',
views: {
'@': {
templateUrl: 'layout.html'
},
'mainNav@index': {
template: '<a ui-sref="Main1">Main1</a><br />'
+ '<a ui-sref="Main2">Main2</a><br />'
+ '<a ui-sref="Main3">Main3</a>'
},
'subNav@index' : {
template: '<p>This is the sub navigation</p>'
},
'content@index': {
template: '<p>This is the content</p>'
}
}
})
有问题的 Main1
.state('Main1', {
url: '/Main1',
views: {
/*'mainNav': {
},*/
'subNav': {
template: '<a ui-sref="Sub1">Sub1</a><a ui-sref="Sub2">Sub2</a>'
},
'content': {
template: '<p>This is the content in Main1</p>'
}
}
})
工作状态
.state('Main2', {
url: '/Main2',
views: {
'': {
templateUrl: 'layout.html'
},
'mainNav@Main2': {
template: '<a ui-sref="Main1">Main1</a><br />'
+ '<a ui-sref="Main2">Main2</a><br />'
+ '<a ui-sref="Main3">Main3</a>'
},
'subNav@Main2': {
template: '<a ui-sref="Sub1">Sub for Main2</a>'
},
'content@Main2': {
template: '<p>This is the content in Main2</p>'
}
}
})
.state('Main3', {
parent: 'index', // PARENT does the trick
url: '/Main3',
views: {
'subNav': { // PARENT contains the anchor/target - relative name is enough
template: '<a ui-sref="Sub1">Sub for Main3</a>'
},
'content': {
template: '<p>This is the content in Main3</p>'
}
}
})
这篇关于更改状态时如何保持同级 ui-views?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!