Error in ionNavBackButton after migration to beta 14

1

After migration Im always receiving following error:

Controller ‘ionNavBar’, required by directive ‘ionNavBackButton’, can’t be found!

2

Hmm cant figure this out. Can you give more detail. Your markup and controller.

3

My menu:

<ion-nav-bar class="bar-light nav-title-slide-ios7">
  <!-- <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> {{ 'BACK' | translate }}</ion-nav-back-button> -->
</ion-nav-bar>

<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

<header class="bar bar-header bar-light">
  <h1 class="title"><img class="logo" ng-src="./img/ilq-logo.svg" alt="Ilikeq logo"></h1>
</header>

<ion-content class="has-header bg-white">
  <ion-list>
    <ion-item nav-clear menu-close href="#/app/people">
      <i class="ion-person-stalker menu-left_icon"></i> {{ 'PEOPLE' | translate }}
    </ion-item>
    <ion-item nav-clear menu-close href="#/app/notifications">
      <i class="ion-ios7-bell menu-left_icon"></i> {{ 'NOTIFS' | translate }}
      <span class="bubble-notification" ng-if="$root.unread_notifs > 0">
        {{$root.unread_notifs}}
      </span>
    </ion-item>
    <ion-item nav-clear menu-close href="#/app/like">
      <i class="ion-thumbsup menu-left_icon"></i> {{ 'LIKE_GAME' | translate }}
    </ion-item>

    <ion-item nav-clear menu-close href="#/app/rate" ng-hide="hideRate">
      <i class="ion-arrow-graph-up-right menu-left_icon"></i> {{ 'RATE_GAME' | translate }}
    </ion-item>

	  <ion-item nav-clear menu-close href="#/app/date" ng-hide="hideDate">
		  <i class="ion-ios7-wineglass menu-left_icon"></i> {{ 'DATE_GAME' | translate }}
	  </ion-item>
    <ion-item nav-clear menu-close href="#/app/conversations">
      <i class="ion-email menu-left_icon"></i> {{ 'MESSAGES' | translate }}
		<span class="bubble-notification" ng-if="$root.unread_conversations > 0">
			{{$root.unread_conversations}}
			</span>
    </ion-item>
    <ion-item nav-clear menu-close href="#/app/me">
      <i class="ion-person menu-left_icon"></i> {{ 'YOUR_PROFILE' | translate }}
    </ion-item>
	  <ion-item nav-clear menu-close href="#/app/terms" ng-hide="hideTerms">
		   {{ 'TERMS' | translate }}
	  </ion-item>
  </ion-list>
</ion-content>

My view:

<ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>

<ion-nav-buttons side="right">
    <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> {{ 'BACK' | translate }}</ion-nav-back-button>
    <button class="button button-small button-assertive headerFilter" ng-click="openFilters()">
        <i class="icon ion-arrow-down-b"></i> {{ 'FILTERS' | translate }}
    </button>
</ion-nav-buttons>

<ion-content class="has-header content-padding preserve3d" home-resize>

    <div id="in-app-purchase-list"></div>

    <div class="space-l">
        <fieldset class="switch switch-three">
            <input type="radio" ng-model="searchTypeValue" value="all" name="select" id="optone" ng-change="searchType(searchTypeValue)" />
            <label for="optone">{{ 'ALL' | translate }}</label>
			<input type="radio" ng-model="searchTypeValue" value="near" name="select" id="optthree" ng-change="searchType(searchTypeValue)" />
			<label for="optthree">{{ 'NEAR' | translate }}</label>
            <input type="radio" ng-model="searchTypeValue" value="top" name="select" id="opttwo" ng-change="searchType(searchTypeValue)"  />
            <label for="opttwo">{{ 'TOP' | translate }}</label>

            <span class="switch-button"></span>
        </fieldset>
    </div>

    <div class="row row-fullWidth space-l">
        <div ng-repeat="piar in columns" ng-class="(homeAnimated === true && $root.animations === true) ? 'is-animated anm-column anm-fadeInDown' : ''" class="col">
            <div ng-repeat="user in piar">
                <div class="card user-card">
                 
                    <a class="block_link bg-graylight" href="#/app/user/{{user.id}}">
                        <img class="responsiveImage fullWidth borderRadius-s overflow-hidden"
                             ng-src="http://{{user.profile_picture.href}}"
                             image-on-load>
                        <div class="profile-name">
                            {{user.nickname}}, {{user.age}}
                        </div>
                    </a>
                    <div class="u-relative">
                        <button class="button button-small button-assertive" ng-click="like(user.id, $event)">
                            <i class="ion-thumbsup buttonIcon buttonIcon-m"></i> {{ 'LIKE' | translate }}
                        </button>
                        <span class="status-online cGray" ng-if="user.is_online"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="noData" ng-show="!hasDataUsers">Oops! We don't have any data yet. Please try again.</div>

    <button class="button button-assertive fullWidth" ng-click="more()">
        {{ 'MORE_PEOPLE' | translate }} <i class="ion-arrow-right-c buttonIcon buttonIcon-m"></i>
    </button>
    <div class="space-moreBottom"></div>
</ion-content>
4

Hi @dharmoslap, i think it’s because <ion-nav-back-button> directive isn’t inside a <ion-nav-bar>.
You should have something like:

<ion-nav-bar>
  <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>

Hope it helps!

5

Can you give more information about “translate”?
How to do multilingual app?