, but...">
Geek Answers Handbook

Ion nav buttons not showing

I am trying to enable the "Edit" button for a certain type of tab in the navigation bar with <ion-nav-buttons>, but they are not displayed. The documentation states that it <ion-nav-buttons>should be a child of <ion-view>what it is, so I'm a little confused about why it is not at work. I read that people had problems with the navigation buttons inside the abstract view, but spots.htmlnot an abstract view.

Below is the nav button, which does not work inside 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>

And the corresponding part 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>
+4
source share
2 answers

, button-positive. , .

0

" ", ( , ). - "", " ", ", ", "clickable " ..

, , - ui-sref="tab.spot-detail({ id:{{spot.id}} })". {{}}.

0

More articles:


All Articles