在Angular UI路由器嵌套状态的url更改，但模板不加载
我正在使用ui路由器嵌套状态和视图。 当我点击链接时，URL变成子状态的URL，但是模板不加载。
例如，当URL更改为子状态project/settings ，相应的模板project.settings.html不加载。
这是一个由普恩克尔提供的SSCCE
以下是我的代码：
app.js
myApp.config(function ($stateProvider, $urlRouterProvider){ $stateProvider .state('project', { url: "/project", views:{ "content":{templateUrl: "partials/project.html"}, "header":{templateUrl: "partials/header"} } }) .state('project.settings', { url: "/settings", views:{ "content":{templateUrl: "partials/project.settings.html"}, "header":{templateUrl: "partials/header"} } }) $urlRouterProvider.otherwise("/") }); /* cheching whether the user is authentic or not*/ myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) { $rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState){ if($cookieStore.get('user')){ validateCookie.authService(function(result,error){ if(!result){ $location.path("/"); }else{ $state.go('project.settings'); } }); } else{ $location.path("/"); } }); });
的index.html
<div ng-controller="userController"> <div ui-view="header"></div> <div class="container" ui-view="content"></div> </div>
project.html
<div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> </div>
project.settings.html
<h1>Project Setting -State test</h1>
你的嵌套的project.settings状态需要使用'@'后缀来明确地处理更高状态的视图，即：
.state('project.settings', { url: "/settings", views:{ "content@":{templateUrl: "partials/project.settings.html"}, "header@":{templateUrl: "partials/header"} } })
首先将templateurl中的文件名project.settings.html和文件名改为projectSettings.html （remove dot）。
.state('project.settings', { url: "/settings", views:{ "content":{templateUrl: "partials/projectSettings.html"}, "header":{templateUrl: "partials/header"} } })
在项目模板中添加两个div来加载子页面（header abd projectSettings）
注意：此div中的任何内容将被replace为在此加载的页面。
project.html
<div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> <div ui-view="header">( Project Page header will replace with projectSettings header )</div> <div class="container" ui-view="content">( Project Page content will replace with projectSettings Content )</div> </div>
我有同样的问题，解决的办法是把ui-view放到你父母的模板里。 因为你的部分也需要一个，如果他们将从一个子状态加载模板。 见这里https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing–loading–showing
如果使用UI路由器使用嵌套视图，请确保将ui-view添加到父页面的html中，并包含特定的命名视图。
我有同样的问题，解决scheme是; 打开project.html文件（这是父页面），并包裹在<ui-view>
所以，取代这些：
<div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> </div>
用这些：
<ui-view> <div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> </div> </ui-view>
你会好起来的;）
在project.html模板中使用ui-sref="project.settings"作为链接。
