javascript - UI-Router嵌套状态 View 未渲染(渲染父 View )

Question

在 Angular 中使用 ui-router，我设置了一个“用户”状态，其中我的应用程序中的所有用户都以 ng-repeat 形式返回。我正在尝试为用户个人资料页面创建显示状态，但是子状态的 View 继承父 View “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

嵌套 View users.show实际上将在 user 内渲染看法。所以你只需要再放置一个 <ui-view> templates/users/index.html内其中show View 将呈现。