Angular Ui-Router 出现双页眉和页脚问题答案

【问题标题】：Having Double header and footer issues with Angular Ui-RouterAngular Ui-Router 出现双页眉和页脚问题
【发布时间】：2015-08-30 06:24:06
【问题描述】：

所以我收到 Angular-UI 的一个奇怪错误，基本上我的 ui-view 导致我有双页眉和双页脚。我已经截取了问题的屏幕截图。

这是我的 Angular ui routes.js 文件

var planoxApp = angular.module('planoxApp')

planoxApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      views: {
        '':{
          templateUrl: 'index.html',
            controller: 'MainCtrl'
        },
        'assembly@home':{
          templateUrl: 'assembly.html'
        },
        'client@home':{
           templateUrl: 'home_client.html'
        },
        'photoplan@home':{
            templateUrl: 'home_photoplan.html'
       }
     }
     })
    .state('clients', {
      url: '/clients/{id}',
      templateUrl: 'client/clientsmain.html',
      controller: 'ClientCtrl as client'
    })
    .state('clients.clientoverview', {
      url: '/overview',
      templateUrl: 'client/clientoverview.html',
    })
    .state('clients.photoplans', {
      url: '/photoplans',
      templateUrl: 'client/clientphotoplans.html',
    })
    .state('clients.editclient', {
      url: '/edit',
      templateUrl: 'client/clientedit.html',
    })
    .state('clients.editbranding', {
      url: '/branding',
      templateUrl: 'client/clientbranding.html',
    })
    .state('clients.clientsettings', {
      url: '/settings',
      templateUrl: 'client/clientsettings.html',
    })

    .state('photoplans', {
      url: '/photoplans/{id}',
      templateUrl: 'photoplan/photoplanmain.html',
      controller: 'PhotoplanCtrl as photoplan'
    })
    .state('photoplans.editproperty', {
      url: '/edit',
      templateUrl: 'photoplan/editproperty.html',
    })
    .state('photoplans.uploadproperty', {
      url: '/upload',
      templateUrl: 'photoplan/uploadproperty.html',
    })
    .state('photoplans.slideshowproperty', {
      url: '/slideshow',
      templateUrl: 'photoplan/slideshowproperty.html',
    })
    .state('photoplans.floorplanproperty', {
      url: '/floorplan',
      templateUrl: 'photoplan/floorplanproperty.html',
    })
    .state('photoplans.downloadproperty', {
      url: '/download',
      templateUrl: 'photoplan/downloadproperty.html',
    })
    .state('photoplans.syndicationproperty', {
      url: '/syndication',
      templateUrl: 'photoplan/syndicationproperty.html',
    })
    .state('photoplans.analyticsproperty', {
      url: '/analytics',
      templateUrl: 'photoplan/analyticsproperty.html',
    })
    .state('photoplans.editsettings', {
      url: '/settings',
      templateUrl: 'photoplan/editsettings.html',
    })

}])

这是导致问题的我的索引文件

<html>
  <head>
    <title>My Angular App!</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="../app.js"></script>
    <script src="../route.js"></script>
    <script src="../controllers/controller.js"></script>
    <script src="../directives.js"></script>
  </head>
  <body ng-app="planoxApp">

    <!-- Header Section-->

    <header>
      <nav class="navbar header navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header_navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"> <img ng-src="../images/favicon_64x64.ico" /></a>
          </div>
            <div class="collapse navbar-collapse" id="header_navbar">
              <ul class="nav navbar-nav left-nav">
                <li><a ui-sref="home"> Home </a></li>
                <li><a> Photoplan </a></li>
                <li><a> Client </a></li>
                <li><a> Admin </a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Recent</a></li>
                <li><a href="#"><i class="user-account"></i><i class="sr-only">User Account</i></a></li>
              </ul>
            </div>
        </div>
      </nav>
    </header>


<ui-view>


<div class="container">
<!-- Main Section -->
    <div class="home no-subheader container">
      <div class="row" ng-controller="MainCtrl as main">

        <!-- left -->
        <section name="assembly-queue" class="molding col-md-4" id="assembly">
          <div class="gutter">
            <div id="expanding">
            <div class="top row">
              <div ui-view="assembly"></div>
                </div>
              </div>
              </section>

        <!-- middle -->
        <section name="clients" class="molding col-md-4" id="clients">
          <div class="gutter">
            <div class="top row">
        <div ui-view="client"> </div>

        </div>
      </div>
      </section>

        <!-- right -->
        <section name="photoplans" class="molding col-md-4" id="photoplans">
          <div class="gutter">
            <div class="top row">
        <div ui-view="photoplan"> </div>
      </div>
      </div>
    </section>
      </div>
    </div>
    </div>
  </div>

  <div id="footer">
    <div class="container">
      <p class="text-muted">Im a sucky footer</p>
    </div>
  </div>
</ui-view>

  </body>
</html>

我想知道是不是因为我在其他页面上有 ui-view？

因为我只有首页的双标题问题，所以我的页面中没有其他地方有这个问题。非常感谢任何帮助，在此先感谢！

【问题讨论】：

标签： javascript html angularjs angular-ui-router

【解决方案1】：

问题是您的家庭状态正在引用您的 index.html 文件作为它的模板。这意味着它会为您的家乡加载两次。为了解决这个问题，您需要将您的家庭状态的内容移动到一个单独的模板中。

您的 index.html 文件应如下所示。注意 ui-view 是空的：

<html>
  <head>
    ...
  </head>
  <body ng-app="planoxApp">
    <header>
      <!-- Header Section-->
      ...
    </header>

    <ui-view></ui-view>

    <div id='footer'>
      <!-- Footer Section -->
      ...
    </div>

  </body>
</html>

现在创建一个新的 home.html 文件，其中包含以前在该 ui-view 中的内容

<div class="container">
    <!-- Main Section -->
    <div class="home no-subheader container">
        <div class="row" ng-controller="MainCtrl as main">

            <!-- left -->
            <section name="assembly-queue" class="molding col-md-4" id="assembly">
                <div class="gutter">
                    <div id="expanding">
                        <div class="top row">
                            <div ui-view="assembly"></div>
                        </div>
                    </div>
            </section>

            <!-- middle -->
            <section name="clients" class="molding col-md-4" id="clients">
                <div class="gutter">
                    <div class="top row">
                        <div ui-view="client"></div>

                    </div>
                </div>
            </section>

            <!-- right -->
            <section name="photoplans" class="molding col-md-4" id="photoplans">
                <div class="gutter">
                    <div class="top row">
                        <div ui-view="photoplan"></div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

最后，在你的路由配置中，家乡状态应该是这样配置的。注意根 templateUrl 现在指向 home.html：

.state('home', {
    url: '/',
    views: {
        '': {
            templateUrl: 'home.html',
            controller: 'MainCtrl'
        },
        'assembly@home': {
            templateUrl: 'assembly.html'
        },
        'client@home': {
            templateUrl: 'home_client.html'
        },
        'photoplan@home': {
            templateUrl: 'home_photoplan.html'
        }
    }
})

一般来说，ui-view 元素中不应包含任何内容，因为它们只会被替换。以下是来自ui-router wiki 的部分内容：

如果您希望在状态激活填充之前拥有一些默认内容，您也可以这样做。一旦激活状态并使用模板填充 ui-view，内容将被替换。

【讨论】：