我正在使用带有组件的UI-Router。导航运行良好,零部件$ onInit被称为一次(如预期的那样),但在指令的$ oninit(指令为组件模板中的指令)被称为两次。
如果从组件模板中删除UI-View属性,则仅调用一次。不知道为什么是。
第一个问题 :我应该以自己的方式使用UI-View吗?我希望能够使用嵌套路由,以便保留父状态(管理用户将是网格,我想保留任何分类,分页等)。我还希望孩子路线更换父母的DOM片段。
第二个问题 :为什么指令的$ onInit被称为两次?
http://plnkr.co/edit/rc8vbt?p=preview
我的代码看起来像这样:
var admin = {
name: 'admin',
abstract: true,
url: '/Admin',
template: `<div ui-view=""></div>`
};
var adminManageUsers = {
name: 'admin.manageUsers',
url: '/Users',
component: 'manageUsers'
};
var adminAddUser = {
name: 'admin.manageUsers.add',
url: '/Add',
component: 'addUser'
};
$urlRouterProvider.otherwise('/Admin/Users');
$stateProvider
.state(admin)
.state(adminManageUsers)
.state(adminAddUser);
和组件
app.component('manageUsers', {
template: `<div ui-view="">
<div>Manage Users</div>
<input type="button" value="Add User" ng-click="$muCtrl.addUser()" />
<test-directive></test-directive>
</div>`,
controller: adminManageUsersComponentController,
controllerAs: '$muCtrl'
});
app.component('addUser', {
template: `<div ui-view="">
<div>Add User</div>
<input type="button" value="Manage Users" ng-click="$auCtrl.manageUsers()" />
</div>`,
controller: adminAddUserComponentController,
controllerAs: '$auCtrl'
});
edit :
我在这里创建了另一个PLNKR,该plnkr使用此处详细的命名视图(命名视图/视图定位)。仍然存在同一问题:(
这是一个已知的问题,已在主人中解决,很可能会进入下一个版本。
https://github.com/angular-ui/ui-router/issues/3224