Ion nav buttons not showing

Question

I am trying to enable an "Edit" button for a specific tab view in the nav-bar using <ion-nav-buttons> but they don't show up. The documentation mentions that <ion-nav-buttons> needs to be a child of <ion-view> which it is, so I am a bit confused as to why it's not working. I have read that people have had problems with the nav-buttons inside of an abstract view, but spots.html is not an abstract view.

Below is the nav button that is not working inside of 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>

And the relevant portion of my router file, 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
    }
  })

Relevant part of my index.html

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

Can you add the body part of your index.html ? several declarations of ion-view can shadow the header. — benek
I don't have the precise explanation, but what work for me is : having ion-nav-buttons inside the ion-nav-bar (out of the ion-nav-view/ion-view), and for specific view buttons, I use a ion-header-bar and basic button inside of it. — benek

Icycool Icycool · Accepted Answer · 2015-06-29T03:27:30

When you say "not working", it's quite vague for us (at least me). Do say something like "not visible", "visible not clickable", "clickable but no effect", "clickable with wrong effect", etc.

One obvious mistake I can see from the code is ui-sref="tab.spot-detail({ id:{{spot.id}} })". You should omit the {{}} inside evaluation.

Ion nav buttons not showing

2 Answers