javascript - ionic 导航按钮不显示

标签 javascript angularjs ionic-framework

我正在尝试使用 <ion-nav-buttons> 为导航栏中的特定选项卡 View 启用“编辑”按钮但他们没有出现。 documentation提到<ion-nav-buttons>需要是 <ion-view> 的 child 确实如此,所以我对为什么它不起作用感到有些困惑。我读到人们对抽象 View 中的导航按钮有疑问,但是 spots.html不是抽象 View 。

下面是在 spots.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>

最佳答案

当您说“不工作”时,我们(至少我)觉得很模糊。一定要说“不可见”、“可见不可点击”、“可点击但无效”、“可点击但效果不佳”等。

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

关于javascript - ionic 导航按钮不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31107082/

相关文章:

javascript - JavaScript 中的 Font Awesome 错误 : Uncaught SyntaxError: Unexpected identifier ​

javascript - 如果名称很长,如何使可点击按钮保持原位

javascript - 无法通过ajax发送电子邮件

android - Cordova 错误 : No emulator images (avds) found

javascript - 接收错误代码3、http_status null、body null、异常状态2

javascript - 在网页中禁用复制/粘贴

html - 在单页应用程序中将页脚设置为底部

javascript - AngularJS 搜索并显示更多结果

javascript - Angular 路由入门

javascript - 使用 ngIf 切换子标题时如何调整 Ionic 主要内容的大小