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>