ionic 刪除返回按鈕文字，及自定義nav兩側的按鈕和title格式

一、刪除返回按鈕文字

1）能夠在app.js進行配置

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

      $ionicConfigProvider.platform.ios.tabs.style('standard');
      $ionicConfigProvider.platform.ios.tabs.position('bottom');
      $ionicConfigProvider.platform.android.tabs.style('standard');
      $ionicConfigProvider.platform.android.tabs.position('standard');

      $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
      $ionicConfigProvider.platform.android.navBar.alignTitle('center');

      $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-android-arrow-back');
      $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-ios-arrow-back');

2）若是上面行不通，那麼就去改源碼 以下所示

打開lib下的ionic.bundle.js

註釋掉下面這句代碼：

// buttonEle.appendChild(buttonTextEle);

    function hasIconClass(ele) {
        return /ion-|icon/.test(ele.className);
      }

      var defaultIcon = $ionicConfig.backButton.icon();
      if (!hasIcon && defaultIcon && defaultIcon !== 'none') {
        buttonEle.innerHTML = '<i class="icon ' + defaultIcon + '"></i> ' + buttonEle.innerHTML;
        buttonEle.className += ' button-clear';
      }

      if (!hasInnerText) {
        var buttonTextEle = $document[0].createElement('span');
        buttonTextEle.className = 'back-text';

        if (!hasButtonText && $ionicConfig.backButton.text()) {
          buttonTextEle.innerHTML += '<span class="default-title">' + $ionicConfig.backButton.text() + '</span>';
        }
        if (!hasPreviousTitle && $ionicConfig.backButton.previousTitleText()) {
          buttonTextEle.innerHTML += '<span class="previous-title"></span>';
        }
        // buttonEle.appendChild(buttonTextEle);

      }

 

二、隱藏默認返回按鈕

在ion-view標籤加上 hide-back-button="true" 便可；

 

三、自定義Nav兩側的button及Nav的title

1）兩側按鈕

//nav左邊功能按鈕
<ion-nav-buttons side="left">
      <button class="button button-clear">
        <i class="icon ion-ios-chatbubble-outline"></i>
      </button>
</ion-nav-buttons>
//nav右邊功能按鈕
<ion-nav-buttons side="right">
      <button class="button button-clear">
        <i class="icon ion-ios-chatbubble-outline"></i>
      </button>
</ion-nav-buttons>

2）Nav的title

//ion-nav-title 標籤裏面的內容隨便改
 <ion-nav-title>
      <h1 class="title"> 購物車</h1>
 </ion-nav-title>