UI-Router 嵌套状态视图不渲染（渲染父视图）

Question

在 Angular 中使用 ui-router，我设置了一个“用户”状态，其中我的应用程序中的所有用户都以 ng-repeat 的形式返回。我正在尝试为用户个人资料页面创建显示状态，但是子状态的视图正在继承父视图'templates/users/index.html'（这是我的 app.js：

  .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 但是在 users.show 状态下被继承的 html 文件是父用户 (index.html) 文件。

任何帮助表示赞赏！

Answer 1

嵌套视图 users.show 实际上会在 user 视图中呈现。因此，您只需在 templates/users/index.html 中放置另一个 <ui-view> 即可呈现 show 视图。