问题描述
限时送ChatGPT账号..最近几个小时我一直在阅读 UI-Router 的文档.但是我找不到解决我的问题的方法.
Last hours I have been reading through docs of UI-Router. But I can't find a solution for my problem.
我的 web 应用程序有两个不同的列,左侧是列表,右侧是详细信息视图.选择列表中的元素应在右侧显示详细信息.
My webapp has two different columns, a list on the left and a detail view on the right. Selecting a element of the list should show detail information on the right.
您更喜欢标题中描述的这两种方法中的哪一种?什么时候用什么?
Which of this two approaches described in the title would you prefer? When to use what?
推荐答案
其实List x Detail场景最适合ui-router
.这实际上是两种状态,父/子(即回答问题的子状态):
In fact, the List x Detail scenario is the most suitable for ui-router
. These are in fact two states, the parent/child (i.e. child states to answer the question):
List view
(例如左栏).这可能是一个动态视图,具有分页、排序和过滤功能,但仍然 - 这将始终是一个网关,一个父级:a Detail view
(例如右栏).要选择详细信息(除非直接通过 url 导航),我们只需要一个 List view
.为了选择不同的细节,我们可以从一个事实中获益,即父/List view
状态是不重新加载,同时在许多细节中迭代......
a List view
(e.g. the left column). This could be a dynamic view, with paging, sorting and filtering, but still - this will always be a gateway, a parent to:
a Detail view
(e.g. the right column). To select a detail (unless navigating via url directly) we simply need a List view
. To select different detail, we can profit from a fact, that the parent/List view
state is not reloading, while iterating among many details...
我们能做的最好的事情就是观察由 ui-router
团队提供的示例:
The best we can do is to observe the example, provided by ui-router
team:
我们还可以看到它的定义,它是这个状态定义的一部分:
And we can also see its definition, which is part of this states definition:
https://github/angular-ui/ui-router/blob/master/sample/app/contacts/contacts.js这个链接属于我记得的最好的记录代码片段......它解释了一切,还有助于了解 ui-router
状态定义是如何工作的.
this link, belongs to the best documented pieces of code I do remember... It explains everything and also helps to learn how the ui-router
state definition is working.
下面我试图通过引用 List 和 Detail 状态的定义来展示这种力量.
Below I tried to show that power by citing the definition of the List and Detail states.
列表状态:
/////////////////////
// Contacts > List //
/////////////////////
// Using a '.' within a state name declares a child within a parent.
// So you have a new state 'list' within the parent 'contacts' state.
.state('contacts.list', {
// Using an empty url means that this child state will become active
// when its parent's url is navigated to. Urls of child states are
// automatically appended to the urls of their parent. So this state's
// url is '/contacts' (because '/contacts' + '').
url: '',
// IMPORTANT: Now we have a state that is not a top level state. Its
// template will be inserted into the ui-view within this state's
// parent's template; so the ui-view within contacts.html. This is the
// most important thing to remember about templates.
templateUrl: 'app/contacts/contacts.list.html'
})
细节状态:
///////////////////////
// Contacts > Detail //
///////////////////////
// You can have unlimited children within a state. Here is a second child
// state within the 'contacts' parent state.
.state('contacts.detail', {
// Urls can have parameters. They can be specified like :param or {param}.
// If {} is used, then you can also specify a regex pattern that the param
// must match. The regex is written after a colon (:). Note: Don't use capture
// groups in your regex patterns, because the whole regex is wrapped again
// behind the scenes. Our pattern below will only match numbers with a length
// between 1 and 4.
// Since this state is also a child of 'contacts' its url is appended as well.
// So its url will end up being '/contacts/{contactId:[0-9]{1,8}}'. When the
// url becomes something like '/contacts/42' then this state becomes active
// and the $stateParams object becomes { contactId: 42 }.
url: '/{contactId:[0-9]{1,4}}',
// If there is more than a single ui-view in the parent template, or you would
// like to target a ui-view from even higher up the state tree, you can use the
// views object to configure multiple views. Each view can get its own template,
// controller, and resolve data.
// View names can be relative or absolute. Relative view names do not use an '@'
// symbol. They always refer to views within this state's parent template.
// Absolute view names use a '@' symbol to distinguish the view and the state.
// So 'foo@bar' means the ui-view named 'foo' within the 'bar' state's template.
views: {
// So this one is targeting the unnamed view within the parent state's template.
'': {
templateUrl: 'app/contacts/contacts.detail.html',
controller: ['$scope', '$stateParams', 'utils',
function ( $scope, $stateParams, utils) {
$scope.contact = utils.findById($scope.contacts, $stateParams.contactId);
}]
},
// This one is targeting the ui-view="hint" within the unnamed root, aka index.html.
// This shows off how you could populate *any* view within *any* ancestor state.
'hint@': {
template: 'This is contacts.detail populating the "hint" ui-view'
},
// This one is targeting the ui-view="menu" within the parent state's template.
'menuTip': {
// templateProvider is the final method for supplying a template.
// There is: template, templateUrl, and templateProvider.
templateProvider: ['$stateParams',
function ( $stateParams) {
// This is just to demonstrate that $stateParams injection works for templateProvider.
// $stateParams are the parameters for the new state we're transitioning to, even
// though the global '$stateParams' has not been updated yet.
return '<hr><small class="muted">Contact ID: ' + $stateParams.contactId + '</small>';
}]
}
}
})
总结:在这些场景中,一定要使用父/子状态定义,因为父将只加载一次,并保留其数据,而我们在其子之间进行迭代
Summary: In these scenarios, do use the parent/child state definition, because the parent will be loaded only once, and keep its data, while we are iterating among its children
查看这些链接了解更多详情:
Check these links for some more details:
Angular UI 路由器嵌套状态在子状态中解析为什么 $routeChangeSuccess 永远不会被调用?当状态发生变化时,如何防止重新加载命名视图?AngularJS UI-路由器这篇关于何时使用子状态 vs 使用 ui-router 的多个视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论