在角UI路由器嵌套状态URL变化，但模板没有加载 [英] In Angular ui-router nested state url changes,but template is not loading

问题描述

我使用的UI路由器嵌套的状态和放大器;意见。当我点击了链接，URL变为的URL子状态，但模板不加载。

例如，当URL更改子状态项目/设置，相应的模板 project.settings.html 没有加载。

下面是 Plunkr

的SSCCE礼貌

下面是我的code，以及：

app.js

  myApp.config（函数（$ stateProvider，$ urlRouterProvider）{
             $ stateProvider
                  .STATE（'项目'，{
                         网址：/项目，
                         观点：{
                         内容：{templateUrl：谐音/ project.html}，
                         头：{templateUrl：谐音/头}
                         }
                       }）                  .STATE（'project.settings'，{
                          网址：/设置
                          观点：{
                           内容：{templateUrl：谐音/ project.settings.html}，
                           头：{templateUrl：谐音/头}
                          }
                         }）
            $ urlRouterProvider.otherwise（/）
   }）;    / * cheching用户是否是可信与否* /
 myApp.run（函数（$ rootScope，$位置$的CookieStore，validateCookie，$州）{
      $ rootScope。在$（'$ stateChangeStart'，函数（事件，toState，toParams，fromState）{
         如果（$ cookieStore.get（用户））{
            validateCookie.authService（功能（结果，错误）{
              如果（！结果）{
                 $ location.path（/）;
              }其他{
                $ state.go（'project.settings'）;
              }
            }）;
         }
         其他{
            $ location.path（/）;
         }
        }）;
    }）;
 

的index.html

 ＆LT; D​​IV NG控制器=UserController的＆GT;
                    ＆LT;格UI视图=头＆GT;＆LT; / DIV＆GT;
                    ＆LT; D​​IV CLASS =容器的UI视图=内容＆GT;＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
 

project.html

 ＆LT; D​​IV NG控制器=UserController的＆GT;
                ＆LT; D​​IV CLASS =细节＆GT;
                    ＆LT;一个UI的SREF = CLASS =BTN BTN-小学＆GT设置;设置＆LT; / A＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
 

project.settings.html

 ＆LT; H1＆GT;项目设置-State测试＆LT; / H1＆GT;
 

解决方案

所有更改文件名 project.settings.html 在templateurl和文件名的第一个以 projectSettings.html （删除点）。

  .STATE（'project.settings'，{
         网址：/设置
          观点：{
               内容：{templateUrl：谐音/ projectSettings.html}，
               头：{templateUrl：谐音/头}
           }
    }）
 

添加两个div项目​​模板中加载子页面（ABD头projectSettings）

注：在这个div的所有内容将在这里加载的页面替换

project.html

 ＆LT; D​​IV NG控制器=UserController的＆GT;
        ＆LT; D​​IV CLASS =细节＆GT;
            ＆LT;一个UI的SREF = CLASS =BTN BTN-小学＆GT设置;设置＆LT; / A＆GT;
        ＆LT; / DIV＆GT;
        ＆LT;格UI视图=头＆GT;＆LT（项目页标题将与projectSettings头替换）; / DIV＆GT;
        ＆LT; D​​IV CLASS =容器的UI视图=内容＆GT;＆LT（项目页面内容将与projectSettings内容替换）; / DIV＆GT;    ＆LT; / DIV＆GT;
 

I am using ui-router for nested states & views. When I click on the link, the URL changes to the URL for the substate, but the template does not load.

For example, when the URL changes to the substate project/settings, the corresponding template project.settings.html is not loading.

Here is an SSCCE courtesy of Plunkr

Below is my code as well:

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>

解决方案

First of all change file name project.settings.html in templateurl and file name to projectSettings.html (remove dot).

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

Add two divs in the project template to load the sub pages (header abd projectSettings)

Note: Any content in this divs will be replaced with the page loaded here.

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路由器嵌套状态URL变化，但模板没有加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！