Question

我的 Angular UI路由器配置存在问题。

我的abstract authenticated状态是我所有经过身份验证的网页都继承的状态。此外，我有dashboard状态，尝试使用parent: 'authenticated'表示法继承此身份验证状态。

这是我的配置：

   .state('authenticated', {
        abstract: true,
        resolve: {
            currentMember: ['$rootScope', '$q', function ($rootScope, $q) {
                return $rootScope.authenticated || $q.reject({unAuthorized: true});
            }]
        }
    })
    .state('dashboard', {
        url: '/dashboard',
        controller: 'DashboardCtrl',
        templateUrl: 'dashboard/views/dashboard.view.html',
        parent: 'authenticated'
    })

但是，使用上述配置，我的仪表板页面始终为空......

如果我按如下方式注释掉父属性：

//parent: 'authenticated'

..然后仪表板视图正确填充其内容......

有人可以帮忙吗？

Answer 1

我们需要的是我们的子视图的目标，我们需要在父状态定义中设置： template: "<ui-view />" ：

.state('authenticated', {
    abstract: true,
    template: "<ui-view />", // here
    resolve: {
        currentMember: ['$rootScope', '$q', function ($rootScope, $q) {
            return $rootScope.authenticated || $q.reject({unAuthorized: true});
        }]
    }
})

这段template: "<ui-view />",代码现在是我们状态机的重要组成部分：它为我们的孩子.state('dashboard'...创建了目标。该状态现在将（其未命名视图）放入该父目标。

当我们注释掉parent:设置时，它工作的原因是：

状态'信息中心'的view已注入index.html目标<div ui-view=""> - （index.html称为根状态）

模板也可以像'<div ui-view=""></div>'。我只是使用简化表达式导致相同的行为...

要获得更多关于这一切的想法，请检查：

View Names - Relative vs. Absolute Names

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

...

代码段引用：

.state('contacts.detail', {
  views: {
    ////////////////////////////////////
    // Relative Targeting             //
    // Targets parent state ui-view's //
    ////////////////////////////////////

    // Relatively targets the 'detail' view in this state's parent state, 'contacts'.
    // <div ui-view='detail'/> within contacts.html
    "detail" : { },            

    // Relatively targets the unnamed view in this state's parent state, 'contacts'.
    // <div ui-view/> within contacts.html
    "" : { }, 

    ///////////////////////////////////////////////////////
    // Absolute Targeting using '@'                      //
    // Targets any view within this state or an ancestor //
    ///////////////////////////////////////////////////////

    // Absolutely targets the 'info' view in this state, 'contacts.detail'.
    // <div ui-view='info'/> within contacts.detail.html
    "info@contacts.detail" : { }

    // Absolutely targets the 'detail' view in the 'contacts' state.
    // <div ui-view='detail'/> within contacts.html
    "detail@contacts" : { }

    // Absolutely targets the unnamed view in parent 'contacts' state.
    // <div ui-view/> within contacts.html
    "@contacts" : { }

从父状态继承时Angular UI路由器出现问题

1 个答案:

View Names - Relative vs. Absolute Names