如何在除着陆页之外的每个页面上都显示一个导航栏,这样就不必在每个需要的页面上附加一个导航栏文件?现在我在主应用程序布局中包含了导航栏,应该如何处理它以使其保持干爽?
演示(每个页面都有导航栏):
var App = angular.module('app', ['ui.router']);
App.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
}).state('landingpage', {
url: '/landingpage',
templateUrl: 'landingpage.html'
});
$urlRouterProvider.otherwise('/home');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-include="'navbar.html'"></div>
<div class="container">
<div ui-view></div>
</div>
<script type="text/ng-template" id="navbar.html">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="landingpage">LandingPage</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
<li ng-hide="signedIn()"><a href="/login">Log In</a></li>
<li ng-show="signedIn()"><a ng-click="logout()">Log Out</a></li>
</ul>
</nav>
</script>
<script type="text/ng-template" id="home.html">
<h1>The Homey Page</h1>
</script>
<script type="text/ng-template" id="about.html">
<h1>The About Page</h1>
</script>
<script type="text/ng-template" id="landingpage.html">
<h1>Landing Page</h1>
<a ui-sref="home">Home</a>
</script>
</div>
最佳答案
创建命名 View ,如 <div ui-view name="nav"></div>
并按状态设置 templateUrl。对于 landingpage
状态,只是不要为 nav
提供 templateUrl查看,它不会呈现导航栏。
更新:隐藏于landingpage
不是 home
状态。
var App = angular.module('app', ['ui.router']);
App.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
views: {
nav: {
templateUrl: 'navbar.html'
},
content: {
templateUrl: 'home.html'
}
}
})
.state('about', {
url: '/about',
views: {
nav: {
templateUrl: 'navbar.html'
},
content: {
templateUrl: 'about.html'
}
}
}).state('landingpage', {
url: '/landingpage',
views: {
content: {
templateUrl: 'landingpage.html'
}
}
});
$urlRouterProvider.otherwise('/home');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ui-view name="nav"></div>
<div class="container">
<div ui-view name="content"></div>
</div>
<script type="text/ng-template" id="navbar.html">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="landingpage">LandingPage</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
<li ng-hide="signedIn()"><a href="/login">Log In</a></li>
<li ng-show="signedIn()"><a ng-click="logout()">Log Out</a></li>
</ul>
</nav>
</script>
<script type="text/ng-template" id="home.html">
<h1>The Homey Page</h1>
</script>
<script type="text/ng-template" id="about.html">
<h1>The About Page</h1>
</script>
<script type="text/ng-template" id="landingpage.html">
<h1>Landing Page</h1>
<a ui-sref="home">Home</a>
</script>
</div>
关于javascript - 如何使用 ui-router 仅在某些页面上附加导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29576063/