Question

我正在尝试使用<ion-nav-buttons>为导航栏中的特定标签视图启用“修改”按钮，但它们不会显示。 documentation提到<ion-nav-buttons>需要成为<ion-view>的孩子，所以我对它为什么不起作用感到困惑。我已经读过人们在抽象视图中遇到导航按钮的问题，但spots.html不是抽象视图。

以下是在spot.html内部无效的导航按钮。

<ion-view title="Spots">
    <ion-nav-buttons side="right">
        <button class="button button-clear button-positive">Grid</button>
    </ion-nav-buttons>
    <ion-content>
        <div ng-hide="gridView" class="list">
            <a ng-repeat="spot in spots" ui-sref="tab.spot-detail({ id:{{spot.id}} })" class="item item-thumbnail-left">
                <img ng-src="{{ spot.thumb_url }}">
                <h2>{{ spot.name }}</h2>
            </a>
        </div>
    </ion-content>
</ion-view>

tabs.html

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button class="button-clear">
    <i class="ion-chevron-left"></i>
  </ion-nav-back-button>
</ion-nav-bar>

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

  <!-- Spots Tab -->
  <ion-tab title="Spots" icon="icon ion-ios7-world" href="#/tab/spots">
    <ion-nav-view name="tab-spots"></ion-nav-view>
  </ion-tab>

  <!-- Upload Tab -->
  <ion-tab title="Upload" icon="icon ion-ios7-camera" href="#/tab/upload">
    <ion-nav-view name="tab-upload"></ion-nav-view>
  </ion-tab>

  <!-- Friends Tab -->
  <ion-tab title="Friends" icon="icon ion-ios7-people" href="#/tab/friends">
    <ion-nav-view name="tab-friends"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>

我路由器文件的相关部分app.js

 $stateProvider

  .state('welcome', {
    url: "/welcome",
    controller: 'WelcomeCtrl',
    templateUrl: "templates/welcome.html",
    data: {
      requiresLogin: false
    }
  })

  // setup an abstract state for the tabs directive
  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  .state('tab.spots', {
    url: '/spots',
    views: {
      'tab-spots': {
        templateUrl: 'templates/tab-spots.html',
        controller: 'SpotsCtrl'
      }
    },
    data: {
      requiresLogin: true
    }
  })

我的index.html

的相关部分

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

Answer 1

当你说“不工作”时，对我们来说这是非常模糊的（至少我）。请说“不可见”，“可见不可点击”，“可点击但没有效果”，“可点击效果错误”等等。

我从代码中看到的一个明显错误是ui-sref="tab.spot-detail({ id:{{spot.id}} })"。您应该省略{{}}内部评估。

Answer 2

我通过删除button-positive类来实现它。显然，类的混合以及导航栏的颜色导致按钮混合。

离子导航按钮没有显示

2 个答案: