角UI的路由器：儿童在使用父母的看法 [英] Angular UI-Router: child using parent's view
问题描述
以故事的形式：
我在找这里是一个主详细设置。法师以列表的形式，当我点击一个链接（相对于一个特定的行/记录（或在这种情况下，账户））我想看看在主视图（从字面上看，主查看详细信息：＆LT; DIV CLASS =容器的UI视图=主＆GT;＆LT; / DIV＆GT; ）
我要做到这一点，保持我的URL结构（ /帐户的帐户列表; /帐号/：ID 的详细版本）的，但我想详细视图中使用该列表是使用视图
我现在有
的 index.html的的
...
＆LT; DIV CLASS =容器的UI视图=主＆GT;＆LT; / DIV＆GT;
...
的 accounts.js 的
$ stateProvider
.STATE（'账户'，{
网址：'/账户，
观点：{
'主'：{
控制器：'AccountsCtrl'，
templateUrl：账户/ accounts.tpl.html
}
}，
数据：{PAGETITLE：'账户'}
}）
.STATE（'accounts.detail'，{
网址：'/：身份证'，
观点：{
'主'：{
控制器：'AccountDetailCtrl'，
templateUrl：账户/ detail.tpl.html
}
}，
数据：{PAGETITLE：'帐户资料'}
}）;
在这一点上，<code> /帐户路线按预期工作。它显示帐户/ accounts.tpl.html 正确的主视图。在 HTML 中的中继器的每一行它链接到其相应的 /帐号/：ID URL，这我处理与嵌套状态 accounts.detail 。
什么是可能明显多数的你，谁知道比我更了解这一点，我的 accounts.detail 将呈现给视图主 如果模板存在命名视图帐户/ accounts.tpl.html 。这确实是真的。
但是，这不是我想要的。我想在 accounts.detail 东西父主视图渲染;我想帐户/ detail.tpl.html 的HTML为替换 的HTML账户/ accounts.tpl.html 在中的index.html：＆LT; DIV CLASS =容器的UI视图=主＆GT;＆LT; / DIV＆GT;
所以，我怎么能做到这一点？
我的解决方案在上下文中
诀窍是，作为回答说，建立URL方案，以确定哪个子状态是默认。路上，我间preT纯英文本code是父类是抽象的与正确的URL和默认子类具有相同的URL（由表示' ）。
如果你需要进一步澄清，只是发表评论，我会分享更多的指导。
的.config（配置功能（$ stateProvider）{$ stateProvider
.STATE（'账户'，{
摘要：真实，
网址：'/账户，
观点：{
'主'：{
templateUrl：账户/ accounts.tpl.html'，
控制器：'AccountsCtrl
}
}，
数据：{PAGETITLE：帐户}
}）
.STATE（'accounts.list'，{
网址：''，
观点：{
'主'：{
templateUrl：账户/ list.tpl.html'，
控制器：'AccountsListCtrl
}
}，
数据：{PAGETITLE：帐户列表}
}）
.STATE（'accounts.detail'，{
网址：'/：身份证'，
观点：{
'主'：{
templateUrl：账户/ detail.tpl.html'，
控制器：'AccountDetailCtrl
}
}，
数据：{PAGETITLE：'帐户资料'}
}）;
听起来你根本就不想的意见，是分层的。要做到这一点，只需更改第二个国家的名称详细信息。
不过请注意，在这样做，你就失去了状态树的任何层次的属性（占例如控制器code状态）。
如果你想保持控制器层次，但执行替换的HTML，我会创建两个人，是以控制器逻辑的护理上面的另一位家长，但只有一个非常简单的视图＆LT ; DIV UI视图=＆GT;＆LT; / DIV＆GT;
例如：
$ stateProvider
.STATE（应用程序，网址：{url：''，摘要：真实，模板：parent.html'，控制器：'ParentCtrl'}）
.STATE（'app.accounts'，{网址：'/账户，templateUrl：accounts.tpl.html'，控制器：'AccountsCtrl'}）
.STATE（'app.detail'，{网址：'/帐号/：身份证'，templateUrl：detail.tpl.html'，控制器：'AccountDetailCtrl'}）;
In story form:
What I am looking for here is a master-detail setup. The master is in list form and when I click on a link (relative to a particular row/record (or Account in this case)) I want to see the details in the main view (literally, the "main" view: <div class="container" ui-view="main"></div>).
I want to do this and maintain my URL structure (/accounts for the list of Accounts; /accounts/:id for the detailed version) but I want the detail view to use the view that the list was using.
What I currently have
index.html
...
<div class="container" ui-view="main"></div>
...
accounts.js
$stateProvider
.state ('accounts', {
url: '/accounts',
views: {
'main': {
controller: 'AccountsCtrl',
templateUrl: 'accounts/accounts.tpl.html'
}
},
data: { pageTitle: 'Account' }
})
.state ('accounts.detail', {
url: '/:id',
views: {
'main': {
controller: 'AccountDetailCtrl',
templateUrl: 'accounts/detail.tpl.html'
}
},
data: { pageTitle: 'Account Detail' }
});
At this point, the /accounts route works as expected. It displays accounts/accounts.tpl.html correctly in the main view. In that html each line in the repeater links it to its appropriate /accounts/:id URL, which I am handling with the nested state accounts.detail.
What is probably obvious to the majority of you who know more than me about this, my accounts.detail will render to the view main if that named view exists in the template accounts/accounts.tpl.html. That is indeed true.
But that is not what I want. I want the accounts.detail stuff to render in the parent main view; I want the html of accounts/detail.tpl.html to replace the html of accounts/accounts.tpl.html found in index.html: <div class="container" ui-view="main"></div>.
So how could I accomplish this?
MY SOLUTION IN CONTEXT
The trick is, as the answer says, to set up the URL scheme to identify which child state is "default". The way I interpret this code in plain English is that the parent class is abstract with the proper URL and the "default" child class has the "same" URL (indicated by '').
If you need further clarity, just post a comment and I'll share any more guidance.
.config(function config( $stateProvider ) { $stateProvider
.state ('accounts', {
abstract: true,
url: '/accounts',
views: {
'main': {
templateUrl: 'accounts/accounts.tpl.html',
controller: 'AccountsCtrl'
}
},
data: { pageTitle: 'Accounts' }
})
.state ('accounts.list', {
url: '',
views: {
'main': {
templateUrl: 'accounts/list.tpl.html',
controller: 'AccountsListCtrl'
}
},
data: { pageTitle: 'Accounts List' }
})
.state ('accounts.detail', {
url: '/:id',
views: {
'main': {
templateUrl: 'accounts/detail.tpl.html',
controller: 'AccountDetailCtrl'
}
},
data: { pageTitle: 'Account Detail' }
});
Sounds like you simply don't want the views to be hierarchical. To do this, simply change the name of the second state to detail.
Note however, that in doing so you will lose any hierarchical properties of the state tree (the controller code state of accounts for example).
If you want to keep the controllers hierarchical, but perform a replace of the html, I would create another parent above both others that takes care of the controller logic, but only has an extremely simple view <div ui-view=""></div>.
For example:
$stateProvider
.state('app', { url: '', abstract: true, template: 'parent.html', controller: 'ParentCtrl' })
.state('app.accounts', { url: '/accounts', templateUrl: 'accounts.tpl.html', controller: 'AccountsCtrl' })
.state('app.detail', { url: '/accounts/:id', templateUrl: 'detail.tpl.html', controller: 'AccountDetailCtrl' });
这篇关于角UI的路由器：儿童在使用父母的看法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
