在状态更改时动态更改标头的内容

Dynamically change the content of header on state change

本文关键字：动态 状态      更新时间：2023-09-26

我有一个固定的头和许多状态。我想根据状态的变化来更改标题的内容。我的页眉在index.html中。如何做到这一点。

<body ng-app="app" ng-controller="MainCtrl">
    <header ng-if="$state.current.name === 'foo'"></header>
    <header ng-if="$state.current.name === 'bar'"></header>
    <!-- or change child elements instead -->
    <header>
        <div ng-if="$state.current.name === 'foo'">Hi, I'm foo!</div>
        <div ng-if="$state.current.name === 'bar'">Hi, I'm bar!</div>
    </header>
</body>

如果你使用AngularUI路由器，你可以像这个一样

路由器：

$stateProvider
  .state('main', {
      url: '',
      templateUrl: 'views/main.html',
      controller: 'MainController'
  })
  .state('main.home', {
      url: '/',
      templateUrl: 'views/home.html',
      controller: 'HomeController',
      data: {
        header: 'Home page'
      }
  })
  .state('main.about', {
      url: '/about',
      templateUrl: 'views/about.html',
      controller: 'About Controller',
      data: {
        header: 'About page'
      }
  });

Html:

<body ng-app="app" ng-controller="MainController">
    <header>
        <h1 ng-bind="$state.current.data.header || 'App name'"></h1>
    </header>
    <div ui-view></div>
</body>
相关文章：