Таким образом, я получаю странную ошибку для 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>
Im интересно, если это потому, что у меня есть ui-view на других страницах?
Потому что у меня только проблема с двумя заголовками на первой странице, нигде на моих страницах у меня нет этой проблемы. Любая помощь очень ценится, спасибо заранее!
Проблема в том, что ваше домашнее состояние ссылается на ваш файл 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 шаблоном.