在Angular ui-router嵌套状态url更改,但模板未加载

时间:2014-01-29 07:17:13

标签: javascript angularjs angular-ui-router

我正在使用ui-router进行嵌套状态&观点。当我点击链接时,URL会更改为子状态的URL,但模板不会加载。

例如,当网址更改为子状态project/settings时,相应的模板project.settings.html未加载。

这是SSCCE Plunkr提供的

以下是我的代码:

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>

6 个答案:

答案 0 :(得分:23)

您的嵌套project.settings状态需要使用&#39; @&#39;明确地处理更高状态的视图。后缀,即:

.state('project.settings', {
        url: "/settings",
        views:{
              "content@":{templateUrl: "partials/project.settings.html"},
              "header@":{templateUrl: "partials/header"}
        }
 }) 

在此处查看更多详情https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

答案 1 :(得分:20)

首先将templateurl和文件名中的文件名project.settings.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>

答案 2 :(得分:3)

我遇到了同样的问题,解决方法是将ui-view放到您父母的模板中。因为你的部分也需要一个,如果他们将从子状态加载模板。 见https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading--showing

答案 3 :(得分:2)

如果使用带有UI路由器的嵌套视图,请务必将ui-view添加到父页面的html中并包含特定的命名视图。

答案 4 :(得分:1)

我有同样的问题,解决方案是;打开 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>

你会很高兴;)

答案 5 :(得分:0)

使用ui-sref="project.settings"获取project.html模板中的链接。