Проблемы с двойным верхним и нижним колонтитулами в Angular Ui-Router

0

Таким образом, я получаю странную ошибку для Angular-UI, в основном мой ui-view вызывает у меня двойной заголовок и двойной нижний колонтитул. Я снял снимок этой проблемы.

Изображение 174551

Это мой угловой файл 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>

Im интересно, если это потому, что у меня есть ui-view на других страницах?

Потому что у меня только проблема с двумя заголовками на первой странице, нигде на моих страницах у меня нет этой проблемы. Любая помощь очень ценится, спасибо заранее!

Теги:
angular-ui-router

1 ответ

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 не должны содержать в себе контент, потому что они будут заменены только. Здесь немного об этом от wi-router wiki:

Если вы хотите, чтобы у вас было какое-то содержимое по умолчанию, прежде чем оно будет заполнено активацией состояния, вы также можете это сделать. Содержимое будет заменено сразу после активации состояния и заполняет u-view шаблоном.

  • 0
    Спасибо вам большое!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню