Question

从Ionic开始，但想在我的应用标题右侧添加一个新按钮。

但是，在我的index.html中我只有这个：

<body ng-app="starter">
    <ion-nav-view></ion-nav-view>
</body>

找不到如何编辑标题？我猜测它是在某个模板中生成的，但没有搜索返回任何内容。

Answer 1

如果你需要一个有效的例子......这里是：

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('onepage', {
    url: '/1',
    templateUrl: 'onepage.html'
  })
  
  $urlRouterProvider.otherwise("/1");
})

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Ionic Template</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body>

    <ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view class="slide-left-right"></ion-nav-view>

    <script id="onepage.html" type="text/ng-template">
      <!-- The title of the ion-view will be shown on the navbar -->
      <ion-view title="onepage">
        <ion-nav-buttons side="left">
          <button class="button">
            LeftButton
          </button>
        </ion-nav-buttons>        
        <ion-nav-buttons side="right">
          <button class="button button-assertive">
            RightButton
          </button>
        </ion-nav-buttons>        

        <ion-content class="padding">
          <!-- The content of the page -->
          <h3>Bla bla bla</h3>
          <p>Bla bla bla</p>
        </ion-content>
      </ion-view>
    </script> 

  </body>
</html>

Answer 2

检查此codepen

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="primary">
      <button class="button" ng-click="doSomething()">
        I'm a button on the primary of the navbar!
      </button>
    </ion-nav-buttons>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

可用方：primary，secondary，left和right

编辑Ionic启动器侧面菜单应用程序标题

2 个答案: