Question

我在使用嵌套视图处理UI路由器时遇到问题。我有一个简单的布局页面，带有Header，Nav，mainContainer。我只是想把Header和Nav注入一个Layout页面，mainContent将从资源页面驱动。

然而，除了初始布局之外没有任何显示。

我创建了一个Plunker来显示标记和代码。

非常感谢任何帮助。

 <!DOCTYPE html>
<html ng-app="Portal">

  <head>
    <title>{{PageTitle}}</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
  </head>

  <body style="margin: 0px; padding: 0px; color: #000; font-weight: 900;">
    <div>
      <header>
        <div ui-view="header"></div>
      </header>
    </div>
    <div class="mainNav" style="top: 6vh;position: fixed; display: inline-block;border: 1px solid black;background: #620000;height: 97vh;border-top: 4px solid rgb(36,50,57); box-shadow: 0px 3px 3px 3px rgb(36,50,57);width: 10vw;max-width: 10vw;margin:0px; padding: 0px;">
      <div ui-view="profile"></div>
      <div ui-view="nav"></div>
    </div>
    <div style="width: 89vw;display: inline-block; border: 1px solid black;top: 6vh;left: 10vw;position: fixed;padding: .2%;height: 90vh;">
      <div ui-view="mainContainer"></div>
    </div>
  </body>

</html>

的script.js

var app = angular.module('Portal', [ 'ui.router'  ]);   //, 'ngRoute', 'ngMessages',


app.config(function ($stateProvider) {


    $stateProvider
  .state('root',{
          url: '',
          abstract: true,          
          views: {
            'header': {
              templateUrl: 'Header.html'

            },
            'profile':{
              templateUrl: 'Profile.html'

            },
            'nav':{
                templateUrl: 'Nav.html'
            }
          }
        });

    $stateProvider    
    .state('root.index', {
          url: '/',
          views: {
            'mainContainer': {
              templateUrl: 'Sample.html'
            }
          }
        });

});

了header.html

<div>      
  This is the Text that should be in the heaeder
</div>

我为每个嵌套视图使用相同的示例文本。

Answer 1

多个问题：

1）检查您的templateUrl规范以查看配置文件视图。

它指向一个不存在的文件。 templateUrl：＆＃39; Profile.html＆＃39;您已将文件命名为＆＃39; Porfile.html＆＃39;。

2）您缺少到＆＃34; /＆＃34;的默认路线。您更正的配置应如下所示：

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
     .state('root',{
          url: '',
          views: {
            'header': {
              templateUrl: 'Header.html'

            },
            'profile':{
              templateUrl: 'Porfile.html'

            },
            'nav':{
                templateUrl: 'Nav.html'
            }
          }
        });

    $stateProvider    
    .state('root.index', {
          url: '/',
          views: {
            'mainContainer': {
              templateUrl: 'Sample.html'
            }
          }
        });

});

3）然后在你的index.html中你缺少javascript的脚本src标签

    <script src="script.js"></script>

具有嵌套视图的UI路由器

1 个答案: