Question

我有一个固定的标题和许多状态。我想根据状态变化更改标题的内容。我的标题是在index.html.how中可以做到的。

Answer 1

<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>

Answer 2

如果你使用AngularUI Router，你可以这样做

路由器：

$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>

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

2 个答案: