Question

我有一个在登录/登录过程中隐藏的离子导航栏。登录后，我在底部有标签，顶部有导航栏。可以看到离子导航条，但标题并未显示任何内容。我究竟做错了什么？任何帮助将不胜感激。

的index.html

<body ng-app="mychat">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-header bar-assertive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>

app.js

.config(function($stateProvider, $urlRouterProvider) { 
console.log("setting config"); 
 // Ionic uses AngularUI Router which uses the concept of states 
 // Learn more here: https://github.com/angular-ui/ui-router 
 // Set up the various states which the app can be in. 
 // Each state's controller can be found in controllers.js 
 $stateProvider 


 // State to represent Login View 
 .state('login', { 
 url: "/login", 
 templateUrl: "templates/login.html", 
 controller: 'LoginCtrl', 
 resolve: { 
     // controller will not be loaded until $waitForAuth resolves 
     // Auth refers to our $firebaseAuth wrapper in the example above 
     "currentAuth": ["Auth", 
         function (Auth) { 
             // $waitForAuth returns a promise so the resolve waits for it to complete 
             return Auth.$waitForAuth(); 
 }] 
 } 
 }) 




  // setup an abstract state for the tabs directive 
 .state('tab', { 
 url: "/tab", 
 abstract: true, 
 templateUrl: "templates/tabs.html", 
 resolve: { 
     // controller will not be loaded until $requireAuth resolves 
     // Auth refers to our $firebaseAuth wrapper in the example above 
     "currentAuth": ["Auth", 
         function (Auth) { 
             // $requireAuth returns a promise so the resolve waits for it to complete 
             // If the promise is rejected, it will throw a $stateChangeError (see above) 
             return Auth.$requireAuth(); 
 }] 
 } 
 }) 


// Each tab has its own nav history stack: 


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

 .state('tab.movies', { 
 url: '/movies', 
 views: { 
     'tab-movies': { 
         templateUrl: 'templates/tab-movies.html', 
         controller: 'MoviesCtrl' 
     } 
 } 
 }) 

 .state('tab.people', { 
 url: '/people', 
 views: { 
     'tab-people': { 
         templateUrl: 'templates/tab-people.html', 
         controller: 'PeopleCtrl' 
     } 
 } 
 }) 




 // if none of the above states are matched, use this as the fallback 
 $urlRouterProvider.otherwise('/login'); 


});

制表home.html的

<ion-view title="Home">
<ion-content class="padding">


</ion-content>
</ion-view>

Answer 1

在tab-home.html中使用“view-title”属性

<ion-view view-title="my custom title" >

Answer 2

最可能的原因是模板的路径不正确。我创建了这个JSBin，它可以很好地对login.html模板的路径进行微调。 https://jsbin.com/loluva/1/edit?html,js,console,output

<script id="login.html" type='text/ng-template'>
  <ion-view title="Login">
    <ion-content class="padding">

    </ion-content>
  </ion-view>
</script>

为什么标题没有显示在离子导航栏上？

2 个答案: