ui-router 填充 templateurl 和控制器嵌套抽象状态与嵌套视图

Question

我一直在尝试 ui-router 我遇到了一点怪事。我无法在抽象状态下填充视图。看起来，当状态处于活动状态时，未找到视图

这是一个例子：

国家提供者：

$stateProvider
.state('search', {
    abstract: true,
    url: '',
    views: {
        '@': { 
            templateUrl: 'app/views/layout.html',
        },
        'full-page@search': {
            templateUrl : 'app/views/search/search.html',
        }
    }
})

//------------------------------------------------------------
// Search list view
//------------------------------------------------------------
.state('search.list', {
    url: '/search/users',
    views: {
        'content-container@search' : {
            templateUrl : 'app/views/search/user.list.html',
            controller  : 'SearchResults',
        }
    }
})

//------------------------------------------------------------
// Search view of one users's details
//------------------------------------------------------------
.state('search.user', {
    abstract : true,
    url: '/search/usr/{userId}',
    views: {
        'content-container@search' : {
            templateUrl: 'app/views/user/user.detail.html',
            controller : 'UserController', 
        },
    }
})

//------------------------------------------------------------
// View of the user's details
//------------------------------------------------------------
.state('search.user.view', {
    url : '',
    views: {
        'left-column@search' : { 
            templateUrl : 'app/views/user/user.detail.view.html',
            controller  : 'UserEditController',
        }
    }
})`

HTML：

索引.html：

<div> <div ui-view></div> </div>

布局.html：

<div> <div ui-view='full-page'></div> </div>

搜索.html：

<div> <div ui-view='content-container'></div> </div>

用户.list.html：

<div> <ul> <li ng-repeat="user in users"> <a ui-sref='search.user.view({userId : user.userId})'></a> </li> </ul> </div>

用户.detail.html：

<div> <div ng-view="left-column"></div> <div ng-view='right-column'></div>
</div>

用户.detail.view.html ：

<div> User information </div>

我想要获取的页面状态流程是：

1）search.list 的初始站点加载（冒泡到

• 1.a：加载 layout.html 进入默认的 ui-view 中 索引.html 通过'@'视图'
• 1.b: search.html 通过layout.html中的“全页”视图加载，然后
• 1.c: user.list.html 是通过加载 content-container@search 在search.list状态下查看。这工作得很好而且花花公子

2）单击创建的列表 user.list.html 应该加载 search.user.view 吗？冒泡回到 search.user，

• 2.负载 用户.detail.html 在里面 content-container@search 视图 search.html，然后（这有效）
• 2.b加载 用户.detail.view.html 在里面 ui-view='left-column' user.detail.html 的 div。（这不起作用，“左列”视图留空。）

我最初认为这段代码执行两次相同的抽象状态 ui-view 填充模式（一次针对 user.list，另一次针对 user.detail.view），但是，情况似乎并非如此。似乎 "left-column" 在填充内容容器之前搜索视图

我是 ui-router 的新手，所以我可能对抽象状态如何填充的顺序或抽象状态的预期用途有误解。

Answer 1

你就快到了 - 这是一个 工作笨蛋. 。我所做的改变

用户.detail.html

不是 ng视图 但 ui-view

<div> 
   //<div ng-view="left-column"></div> 
   //<div ng-view='right-column'></div>
   <div ui-view="left-column"></div> 
   <div ui-view='right-column'></div>
</div>

状态“搜索.用户.视图”

之后的部分 @ 分隔符必须是名称 状态 持有那个 ui-view - 这不是 搜索 但 search.user. 。正如我所展示的 right-column 下面 - 如果这实际上是父母......我们可以跳过它 （将在幕后为我们完成）

.state('search.user.view', {
    url : '',
    views: {
        // 'left-column@search' : { 
        'left-column@search.user' : { 
           ...
        },
        'right-column@' : { 
           ...
        }
    }

检查工作示例 这里