Question

所以我得到一个奇怪的错误Angular-UI，基本上我的ui-view导致我有双头和双脚。我拍了一个问题的屏幕截图。

这是我的角度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？

因为我首页上只有双头问题，我的页面中没有其他地方有这个问题。非常感谢任何帮助，提前谢谢！

Answer 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>

最后，在您的路由配置中，应该像这样配置主状态。请注意，root 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。

Angular Ui-Router有双页眉和页脚问题

1 个答案: