UI-Router嵌套状态视图不呈现(呈现父视图)
问题描述:
以角度使用ui-router,我设置了'用户'状态,我的应用程序中的所有用户都以ng-repeat的形式返回。我想不过子状态的视图继承父视图“模板/用户/ index.html的”(这是我的app.js来为用户创建个人资料页面显示状态:UI-Router嵌套状态视图不呈现(呈现父视图)
.state('users', {
abstract: true,
name: 'users',
url: '/users',
views: {
nav: {
templateUrl: 'templates/navbar.html',
controller: 'MainCtrl'
},
content: {
templateUrl: 'templates/users/index.html',
controller: 'UsersCtrl'
}
}
})
.state('users.show', {
url: '/show/:id',
views: {
nav: {
templateUrl: 'templates/navbar.html',
controller: 'MainCtrl'
},
content: {
templateUrl: 'templates/users/show.html',
controller: 'UsersCtrl'
}
}
});
这里是我的index.html:
<div class="container">
<label>Search: <input ng-model="searchText"></label>
<a ui-sref="users.show({id: user.id})" ng-click="showUser(user.id)" ng-repeat="user in users | filter:searchText ">
<h2> {{ user.name }} </h2>
<h3> {{ user.email }} </h3>
<button ng-click="createConversation({sender_id: current_user.id, recipient_id: user.id})" >Message</button>
</a>
</div>
在浏览器的URL是http://localhost:8080/#/users/show/2然而HTML文件被继承的users.show状态是父母的用户(index.html的)文件
任何帮助表示赞赏!
答
嵌套视图实际上将在user
视图内呈现。因此,您只需要在templates/users/index.html
之内放置另一个<ui-view>
,其中show
视图将呈现。
请阅读此[嵌套路线](http://*.com/questions/34251255/creating-nested-route-app-in-angular-using-angular-ui-router-and-switching-betwe/ 34251256#34251256) – Maher