如何使用ui-router在仅某些页面上附加导航栏？

Question

如何在除登录页面之外的所有页面上显示导航栏，从而不必在每个需要的页面上附加导航栏文件？现在，我在主应用程序布局上包含了导航栏，应如何处理使其保持干燥？

演示（每页上带有导航栏）：

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>

Answer 1

创建像这样的命名视图，<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>