Question

我的角度应用程序模板结构中有以下结构：

分音/ main.html中

<body ui-view></body>

分音/ club.html

<main role="main" ui-view></main>
<div class="modal" ui-view="modal"></div>

分音/ club.members.html

<div class="md-view">
    <div class="master-view">...</div>
    <div class="detail-view" ui-view></div>
</div>

分音/ club.members.view.html

<div class="card">...</div>

分音/ club.members.assign.html

<span class="member_name" ng-bind="memberName"></span>

app.js：

$stateProvider.state('club', {
   url: '/:club_id',
   templateUrl: '/partials/club.html',
   controller: 'ClubViewCtrl'
}).state('club.members', {
   url: '/members',
   templateUrl: '/partials/club.members.html',
   controller: 'MemberListCtrl'
}).state('club.members.view', {
   url: '/:member_id',
   templateUrl: '/partials/club.members.html',
   controller: 'MemberViewCtrl' 
}).state('club.members.view.assign', {
   url: '/assign',
   views: {
      'modal': {
         templateUrl: '/partials/club.members.assign.html',
         controller: 'MemberAssignCtrl'
       }
   }
});

目前，一切正常，直到club.members.view：

/my-club/members/1

然而，当我到了club.members.view.assign：

/my-club/members/1/assign

由于某种原因，这甚至不会调用MemberAssignCtrl中的任何内容。有人可以为我解释这个问题吗？

Answer 1

如果您引用的视图与当前视图不在同一名称空间中，则必须使用绝对名称。

在你的情况下改变

views: {
   'modal': {
      templateUrl: '/partials/club.members.assign.html',
      controller: 'MemberAssignCtrl'
    }
}

要：

views: {
   'modal@club': {
      templateUrl: '/partials/club.members.assign.html',
      controller: 'MemberAssignCtrl'
    }
}

ui-router子视图内的多个视图

1 个答案: