如何在角度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'現在，後來它可能會爲'/密碼'觀點是有用的。