使用UI的路由器 - 是否有可能使用常规语法来只设置单一用户界面视图？ [英] Using UI-Router - Is it possible to set only single ui-view using regular syntax?
问题描述
在我的模板之一，我有这样的code：
＆LT; H1＆GT; 1号线和LT; / H1＆GT;
＆LT;小时/＆GT;
＆LT;一个UI的SREF =名单。＆gt;显示列表＆LT; / A＆GT;
＆LT;一个UI的SREF =的东西。＆GT; thing7＆LT; / A＆GT;＆LT;格UI视图=左＆GT;＆LT; / DIV＆GT;
＆LT;格UI视图=右＆GT;＆LT; / DIV＆GT;
当我点击 .LIST 状态 - 我有适当的配置控制器：
....状态（'route1.list'，
{
网址：'/名单，
观点：
{ 左@ ROUTE1：
{
templateUrl：route1.list.html'，
controllerAs：VM
控制器：函数（$范围内）
{
this.items = [一，B，C，D];
}
}，
正确@ ROUTE1：
{
templateUrl：route1.list.html'，
controllerAs：VM
控制器：函数（$范围内）
{
this.items = [1，2，3，4];
}
}
}}）
这是工作的罚款和我看到两种观点得到填充相应的数据。
现在 - 当我点击 .thing 状态 - 我想只有这样的观点：
＆LT;格UI视图=右＆GT;＆LT; / DIV＆GT;
要加载数据。
所以，很显然，我应该使用code：
.STATE（'route1.thing'，
{
网址：/事，
观点：
{
正确@ ROUTE1：
{
templateUrl：route3.html'，
controllerAs：VM
控制器：函数（$范围内）
{
this.thing =我AAA;
}
}
}
}）
问
在我的页面上有多个视图，我只是想抚摸的单一视图（而不是其他人） - 我必须仍然采用这种结构：
.STATE（'route1.thing'，
{
网址：/事，
观点：
{
...
}
我的意思是 - 是否有什么，让我的信息应用到像特定视图中的常规的格式为：
.STATE（'route1.thing'，{
网址：/事，
templateUrl：route3.html
applyTo：对@ ROUTE1，//＆LT; - 像这样的东西
控制器：函数（$范围）{
....
}
}）
我们可以在这种情况下，与UI的路由器做的，是文件嵌套...
根据由Royi纳米尔创建 plunker，我做了一些调整并有更新和工作plunker
因此，我们有父状态的 'route1.list
.STATE（'route1.list'，
{
网址：'/名单，
观点：
{
左@ ROUTE1：
{
...
}，
正确@ ROUTE1：
{
...
}
}
}）
和我们要改变刚的离开或右键的一部分。前面已经说过，我们可以做到这一点与嵌套的状态 - 但嵌套花药上述状态的 'route1.list （下不了盛大父'ROUTE1 ）的
.STATE（'route1.list.thing'，{
网址：'/东西，
观点：{ 正确@ ROUTE1：{
...
}
}
}）
.STATE（'route1.list.left'，{
网址：'/左'，
观点：{ 左@ ROUTE1：{
...
}
}
}）
和这些链接会改变的东西如预期：
＆LT;清单的UI-SREF =＆GT;
＆LT;一个UI的SREF =＆GTlist.left。这将改变左，LT; / A＆GT;
＆LT;一个UI的SREF =。list.thing＆gt;这将改变右LT; / A＆GT;
检查一下这里
In one of my templates , I have this code :
<h1>Route 1</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<a ui-sref=".thing">thing7</a>
<div ui-view="left"></div>
<div ui-view="right"></div>
When I click the .list state - I do have a controller with the appropriate configuration :
....state('route1.list',
{
url: '/list',
views:
{
'left@route1':
{
templateUrl: 'route1.list.html',
controllerAs: "vm",
controller: function ($scope)
{
this.items = ["a", "b", "c", "d"];
}
},
'right@route1':
{
templateUrl: 'route1.list.html',
controllerAs: "vm",
controller: function ($scope)
{
this.items = ["1", "2", "3", "4"];
}
}
}
})
This is working fine and I do see both views getting filled with appropriate data.
Now - when I click on the .thing state - I want only this view :
<div ui-view="right"></div>
To be loaded with data.
So obviously I should use this code :
.state('route1.thing',
{
url: "/thing",
views:
{
'right@route1':
{
templateUrl: 'route3.html',
controllerAs: "vm",
controller: function($scope)
{
this.thing = "I'm aaa";
}
}
}
})
Question
When I have multiple view on the page , and I only want to touch a single view (not the others) — Must I still using this structure :
.state('route1.thing',
{
url: "/thing",
views:
{
...
}
I mean - Is there anything which allows me to apply the info into a specific view like in the regular format:
.state('route1.thing', {
url: "/thing",
templateUrl: "route3.html",
applyTo:"right@route1" , // <-- Something like this
controller: function($scope){
....
}
})
What we can do with UI-Router in this case, is file nesting...
Based on the plunker created by Royi Namir, I made few adjustment and there is an updated and working plunker
So, we have parent state 'route1.list':
.state('route1.list',
{
url: '/list',
views:
{
'left@route1':
{
...
},
'right@route1':
{
...
}
}
})
And we want to change just left or right part. As already said, we can do that with state nesting - but nesting anther the above state 'route1.list' (not under the grand parent 'route1')
.state('route1.list.thing', {
url: '/thing',
views: {
'right@route1': {
...
}
}
})
.state('route1.list.left', {
url: '/left',
views: {
'left@route1': {
...
}
}
})
And these links will change stuff as expected:
<a ui-sref=".list">
<a ui-sref=".list.left">this will change the left</a>
<a ui-sref=".list.thing">this will change the right</a>
Check it here
这篇关于使用UI的路由器 - 是否有可能使用常规语法来只设置单一用户界面视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
