我正在使用ui-router来嵌套状态和视图。当我单击链接时,URL会更改为该子状态的URL,但不会加载模板。
例如,当URL更改为substate时project/settings,project.settings.html不会加载相应的模板。
project/settings
project.settings.html
这是Plunkr提供的SSCCE
下面也是我的代码:
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("/"); } }); });
<div ng-controller="userController"> <div ui-view="header"></div> <div class="container" ui-view="content"></div> </div>
<div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> </div>
<h1>Project Setting -State test</h1>
首先,将project.settings.htmltemplateurl中的文件名和文件名更改为projectSettings.html(删除点)。
projectSettings.html
.state('project.settings', { url: "/settings", views:{ "content":{templateUrl: "partials/projectSettings.html"}, "header":{templateUrl: "partials/header"} } })
在项目模板中添加两个div以加载子页面(标头abd projectSettings)
注意:此div中的所有内容都将替换为此处加载的页面。
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>