如何在 angular ui 路由器的多个视图上创建嵌套视图？

Question

我的应用程序非常简单。我有一个包含页眉和正文的主页。在正文部分，我想显示登录页面，如果 URL 更改为 'password/forget'，我会显示密码重置表单。我的模板：

index.html :

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

home.html:

   <div ui-view>
    </div>

而ui-路由器配置是这样的：

 $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"];
      }
    });
});

我的建议是先创建 'password' 状态。

尝试以下解决方案：

$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

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

如何在 angular ui 路由器的多个视图上创建嵌套视图？

How to make nested views on multiple views in angular ui router?

html

javascript

angularjs

nested-views

angular-ui-router