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

Posted 2023-02-19

【中文标题】在 Angular ui-router 嵌套状态 url 更改，但模板未加载

【英文标题】：In Angular ui-router nested state url changes,but template is not loading

【发布时间】：2014-02-20 20:51:20

【问题描述】：

我将 ui-router 用于嵌套状态和视图。当我单击链接时，URL 会更改为子状态的 URL，但不会加载模板。

例如，当 URL 变为子状态 project/settings 时，对应的模板 project.settings.html 没有加载。

这是由Plunkr提供的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>

【问题讨论】：

这个运气好吗？我有完全相同的问题。

请在下面查看我的答案。它对我有用..

【参考方案1】：

您的嵌套 project.settings 状态需要使用“@”后缀显式处理处于较高状态的视图，即：

.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

【讨论】：

我想知道为什么我看到了@ 标志。我想这让我大开眼界。就我而言，我需要使用content@，因为我用于内容的ui-view 在我的index.html 中。它似乎正在工作；我希望这是正确的方法。

谢谢，虽然这里描述了一个不同的问题，但你的意见@给了我一个提示，我意识到它引用了错误的父级。

【参考方案2】：

首先将templateurl中的文件名project.settings.html和文件名改为projectSettings.html（去掉点）。

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

在项目模板中添加两个div来加载子页面（header 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>

【讨论】：

谢谢！在可能有 6 个其他答案之后，这就是让我通过的答案。我错过了什么？ Add two divs in the project template.

【参考方案3】：

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

【参考方案4】：

如果在 UI-router 中使用嵌套视图，请务必将 ui-view 添加到父页面的 html 中并包含特定的命名视图。

【参考方案5】：

我遇到了同样的问题，解决方法是；打开 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>

你会很高兴的；）

【参考方案6】：

在project.html 模板中使用ui-sref="project.settings" 作为链接。

【讨论】：

已经尝试用 project.setting 替换 .setting 。无论如何谢谢

你能提供工作的 plunker/fiddle（你的 plunker 似乎不工作）吗？

plunkr中的代码不是运行的，我会改进的。我只是想，如果有人有兴趣，编辑和编译会有帮助。谢谢你的建议。