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：

index.html：

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

layout.html：

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

search.html：

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

user.list.html：

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

user.detail.html：

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

user.detail.view.html：

<div> User information </div>

我试图得到的页面状态流是：

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

1.a：通过＆＃39; @＆＃39;将layout.html加载到 index.html 中的默认ui视图中视图＆＃39;
1.b：search.html通过＆＃34;整页＆＃34;加载在layout.html中查看，然后
1.c：user.list.html通过search.list状态中的content-container@search视图加载。这工作正常，花花公子

2）点击user.list.html中创建的列表加载search.user.view哪个应该？回到search.user，

2.a在search.html的content-container@search视图中加载 user.detail.html ，然后（此作品）
2.b在user.detail.html的ui-view='left-column' div中的 user.detail.view.html 中加载。（这不起作用，＆＃34;左栏＆＃34;视图留空。）

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

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

Answer 1

你快到了 - 这是一个working plunker。我做的改变

user.detail.html

不是 ng-view ，而是 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>

州＆＃39; search.user.view＆＃39;

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

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

检查工作示例here

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

1 个答案:

user.detail.html

州＆＃39; search.user.view＆＃39;