Angular 路由问题 - ionic header 未在选项卡中更新

Question

已经开始 angular 和 ionic 的曲棍球棒学习曲线，并跟随 Linda 课程。我犯了某种类型的路由错误（很可能是错字）并且被卡住了..

问题是我的 header 没有更新 日历选项卡 ，它只使用最后一个 header。

app.js

//... angluar.module('starter', ['ionic']) ... .run(..) ...

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('tabs', {
      url: '/tab',
      abstract: true,
      templateUrl: 'templates/tabs.html'
    })

  .state('tabs.home', {
    url: '/home',
    views: {
      'home-tab': {
        templateUrl: 'templates/home.html'
      }
    }
  })

  .state('tabs.list', {
      url: '/list',
      views: {
        'list-tab': {
          templateUrl: 'templates/list.html',
          controller: 'ListController'
        }
      }
    })
      .state('tabs.detail', {
        url: '/list/:aId',
        views: {
          'list-tab': {
            templateUrl: 'templates/detail.html',
            controller: 'ListController'
          }
        }
      })

    .state('tabs.calendar', {
      url: '/calendar',
      views: {
        'calendar-tab': {
          templateUrl: 'templates/calendar.html',
          controller: 'CalendarController'
        }
      }
    })

  ;

  $urlRouterProvider.otherwise('/tab/home');
})

// ... controllers ...

tabs.html

<ion-tabs class="tabs-icon-top tabs-positive">

  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Artist" icon="ion-ios-people" href="#/tab/list">
    <ion-nav-view name="list-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Calendar" icon='ion-calendar' href="#/tab/calendar">
    <ionic-nav-view name="calendar-tab"></ionic-nav-view>
  </ion-tab>

</ion-tabs>

calendar.html

<ion-view view-title="Calendar">
  <ion-content class="has-subheader">
    <!--SEARCH ELEMENT-->
    <div class="bar bar-subheader
          item-input-inset bar-light">
      <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" ng-model="query" placeholder="Search">
      </label>
    </div>
  </ion-content>
</ion-view>

任何帮助将不胜感激。

Answer 1

你的错字 HTML

应该是ion-nav-view而不是ionic-nav-view

<ion-nav-view name="calendar-tab"></ion-nav-view>

而不是

<ionic-nav-view name="calendar-tab"></ionic-nav-view>

Angular 路由问题 - ionic header 未在选项卡中更新

Angular routing issue - ionic header not updated in tab

javascript

angularjs

ionic-framework

angular-ui-router

angularjs-routing