Angularjs 用嵌套视图填充templateurl和控制器嵌套抽象状态的ui路由器

我一直在试验

ui路由器

，我遇到了一点怪癖。我无法在抽象状态下填充视图。当状态处于活动状态时，似乎找不到该视图

以下是一个例子：

国家提供者：

$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:

index.html：

layout.html：

search.html：

user.list.html：

user.detail.html：

user.detail.view.html：

用户信息

我尝试获取的页面状态流为：

1） search.list的初始站点加载（最多

• 1.a：通过“@”视图将

  layout.html

  加载到index.html中的默认ui视图中
• 1.b:

  search.html

  通过layout.html中的“完整页面”视图加载，然后
• 1.c:

  user.list.html

  通过

  内容加载-container@search

  在search.list状态下查看。这工作正常

2） 单击在

user.list.html

中创建的列表，加载search.user.view，哪个应该？返回到search.user

• 2.在

  内容中加载user.detail.html-container@search

  search.html的视图，然后（这样做有效）
• 2.b在user.detail.html的

  ui view='left-column'

  div中加载user.detail.view.html。（这不起作用，“左栏”视图为空。）

我原本以为这段代码会执行两次相同的抽象状态ui视图填充模式（一次用于user.list，另一次用于user.detail.view），但是，看起来情况并非如此。似乎在填充内容容器之前搜索了

“left column”

视图

---

我是ui路由器的新手，所以我可能对抽象状态的填充顺序或抽象状态的预期用途有误解

你就快到了——这里有一个例子。我所做的改变

user.detail.html 不是ng视图，而是ui视图

<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>

检查工作示例

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