angularjs - 何时使用子状态与ui-router的多个 View

Question

最近几个小时，我一直在阅读UI-Router的文档。但是我找不到我的问题的解决方案。

我的webapp有两列，左侧是列表，右侧是详细信息 View 。选择列表的元素应在右侧显示详细信息。

您希望使用标题中描述的两种方法中的哪一种？什么时候使用什么？

Answer 1

实际上，“列表x详细信息”方案最适合ui-router。实际上，这是两种状态，即父/子状态(即，回答问题的子状态):

和List view(例如，左列)。这可能是一个动态 View ，具有分页，排序和过滤功能，但仍然-它始终是网关，是

的父级

和Detail view(例如，右列)。要选择一个细节(除非直接通过url导航)，我们只需要一个List view即可。要选择不同的细节，我们可以从以下事实中受益:父/List view状态为，而没有重载，而在许多细节之间进行了迭代...

我们最好的办法就是观察 ui-router团队提供的示例:

http://angular-ui.github.io/ui-router/sample/#/contacts

我们还可以看到它的定义，它是该状态定义的一部分:

https://github.com/angular-ui/ui-router/blob/master/sample/app/contacts/contacts.js

该链接属于我确实记得的记录最好的代码片段。它解释了所有内容，还有助于了解 ui-router状态定义的工作方式。

下面，我尝试通过引用“列表”和“详细信息”状态的定义来展示这种功能。

列表状态:

/////////////////////
// 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>';
            }]
        }
    }
})

摘要:在这些情况下，请务必使用父级/子级状态定义，因为在我们对其子级进行迭代时，仅会加载一次父级，并保留其数据。

检查这些链接以获取更多详细信息:

Angular UI Router Nested State resolve in child states

why $routeChangeSuccess never gets called?

How do I prevent reload on named view, when state changes? AngularJS UI-Router