在 Angular ui-router 嵌套状态 url 更改，但模板未加载 [英] In Angular ui-router nested state url changes,but template is not loading

问题描述

我将 ui-router 用于嵌套状态 &意见.当我点击链接时，URL 更改为子状态的 URL，但模板未加载.

例如，当 URL 更改为子状态 project/settings 时，不会加载相应的模板 project.settings.html.

这是 Plunkr

提供的 SSCCE

下面也是我的代码:

app.js

myApp.config(function ($stateProvider, $urlRouterProvider){$stateProvider.state('项目', {网址:/项目"，意见:{"content":{templateUrl: "partials/project.html"},"header":{templateUrl: "partials/header"}}}).state('project.settings', {网址:/设置"，意见:{"content":{templateUrl: "partials/project.settings.html"},"header":{templateUrl: "partials/header"}}})$urlRouterProvider.otherwise("/")});/* 检查用户是否真实*/myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) {$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState){if($cookieStore.get('user')){validateCookie.authService(函数(结果，错误){如果(！结果){$location.path("/");}别的{$state.go('project.settings');}});}别的{$location.path("/");}});});

index.html

 
<div ui-view="header"></div><div class="container" ui-view="content"></div>

project.html

 
<div class="详细信息"><a ui-sref=".settings" class="btn btn-primary">设置</a>

project.settings.html

 <h1>项目设置-状态测试</h1>

解决方案

首先将templateurl中的文件名project.settings.html和文件名改为projectSettings.html>(删除点).

 .state('project.settings', {网址:/设置"，意见:{"content":{templateUrl: "partials/projectSettings.html"},"header":{templateUrl: "partials/header"}}})

在项目模板中添加两个div加载子页面(header abd projectSettings)

注意:此 div 中的任何内容都将替换为此处加载的页面.

project.html

 
<div class="详细信息"><a ui-sref=".settings" class="btn btn-primary">设置</a>
<div ui-view="header">(项目页面标题将替换为 projectSettings 标题)</div><div class="container" ui-view="content">(项目页面内容将替换为 projectSettings 内容)</div>

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>

这篇关于在 Angular ui-router 嵌套状态 url 更改，但模板未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！