3

我一直在尝试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>

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：通过“@”视图加载layout.html到index.html中的默认 ui-view
  • 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.a在search.html的视图中加载user.detail.htmlcontent-container@search，然后（这个工作）
  • 2.b 在user.detail.html的ui-view='left-column'div中加载user.detail.view.html。（这不起作用，“左列”视图为空。）

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

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

4

1 回答 1

3

你快到了 - 这是一个工作的小家伙。我所做的改变

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>

状态'search.user.view'

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

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

在此处检查工作示例

于 2014-07-29T08:15:43.167 回答