javascript - 如何在角度 ui 路由器中的多个视图上制作嵌套视图？

Question

我的应用程序非常简单。我有一个包含标题和正文的主页。在正文部分，我想显示登录页面，如果 URL 更改为“密码/忘记”，我将显示密码重置表单。我的模板：

索引.html：

<header ui-view="header">
</header>
<div class="container-fluid">
    <div class="row">
        <div ui-view="main">
        </div>
    </div>
</div>

主页.html：

   <div ui-view>
    </div>

ui-router 配置是这样的：

 $locationProvider.html5Mode({enabled: true, requireBase: false});
 $stateProvider.state('home', {
     url: '/',
     views: {
       'header': {
         templateUrl: '/header.html'
       },
       'main': {
          templateUrl: '/home.html'
       }
 }
 }).state('home.forgetPassword', {
    url: '/password/forget',
    templateUrl: '/forgetPassword.html',
});

现在，当我去“/password/forget”时，任何事情都会发生并且index.html正在显示。当路由更改为 "/password/forget" 时，我想显示forgetPassword.html 。

Answer 1

在 ui-router 的文档中遵循此代码：

myApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "partials/state1.html"
    })
    .state('state1.list', {
      url: "/list",
      templateUrl: "partials/state1.list.html",
      controller: function($scope) {
        $scope.items = ["A", "List", "Of", "Items"];
      }
    })
    .state('state2', {
      url: "/state2",
      templateUrl: "partials/state2.html"
    })
    .state('state2.list', {
      url: "/list",
      templateUrl: "partials/state2.list.html",
      controller: function($scope) {
        $scope.things = ["A", "Set", "Of", "Things"];
      }
    });
});

我建议首先创建“密码”状态。

尝试以下解决方案：

$stateProvider.state('home', {
     url: '/',
     views: {
       'header': {
         templateUrl: '/header.html'
       },
       'main': {
          templateUrl: '/home.html'
       }
 }
 }).state('password', {
    url: '/password',
    templateUrl: '/password.html',
}).state('password.forgetPassword', {
    url: '/forget',
    templateUrl: '/forgetPassword.html',
});

现在创建文件“password.html”，稍后它可能对“/password”视图有用。

Answer 2

问题解决了。它用于/父状态并在子状态中重复。