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

Question

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

的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', 
}); 

现在，当我去“/密码/忘记”任何事情发生n和index.html正在显示。 当路由变为“/ password/forget”时，我想显示forgetPassword.html。

Answer 1

问题已解决。它是父母状态下的/，并在子状态上重复它。

Answer 2

在此之后代码UI路由器的文档：

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'现在，后来它可能会为'/密码'观点是有用的。