Controller 'ionNavBar', required by directive 'ionNavBackButton', can't be found! after updating to beta 14

ionic-v1
1

After updating to beta 14, my back button will not load.

 <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
        <ion-nav-buttons side="left">
            <ion-nav-back-button class="button-clear">
                <i class="button-icon icon ion-ios7-arrow-back"></i>
            </ion-nav-back-button>
            <button menu-toggle="left" class="button button-icon icon ion-navicon">
            </button>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
            <button menu-toggle="right" class="button button-icon icon ion-ios7-more">
            </button>
            <button class="button button-icon icon ion-ios7-reloading" ng-show="loading > 0">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="mainContent" animation="slide-left-right"></ion-nav-view>

</ion-pane>

If I comment out:

 <ion-nav-back-button class="button-clear">
                <i class="button-icon icon ion-ios7-arrow-back"></i>
            </ion-nav-back-button>

It loads however the hamburger icon is gone when I navigate. This works fine with beta 13. Here is the full error:

Error: [$compile:ctreq] Controller ‘ionNavBar’, required by directive ‘ionNavBackButton’, can’t be found!
http://errors.angularjs.org/1.3.6/$compile/ctreq?p0=ionNavBar&p1=ionNavBackButton

2

You need to move the <ion-nav-back-button> directly under the <ion-nav-bar> (you have it inside the ion-nav-buttons):

<ion-nav-bar class="bar-positive">          
    <ion-nav-back-button></ion-nav-back-button>
    <ion-nav-buttons side="left">
    ...
</ion-nav-bar>

If you want to set your back button to a specific icon you need to do it in the config like so:

app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $ionicConfigProvider.backButton.previousTitleText(false).text('').icon('ion-chevron-left');
    ....
 })

Otherwise it will default to the platform specific arrow.

3 Likes
3

Also note that your side-menu-content is using an older syntax. Please use <ion-side-menu></ion-side-menu>

4

Thanks. I saw that in the git commit comments however I didn’t think it applied if I nested 2 buttons within the <ion-nav-bar>, I thought I needed to use a parent element of <ion-nav-buttons>.

I have 2 side menus, a left and a right.

5

Actually I have it partially working with

<ion-side-menus enable-menu-with-back-views="true" ng-controller="Menu as vm">

<ion-side-menu-content>

    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>

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


        <ion-nav-buttons side="right">
            <button menu-toggle="right" class="button button-icon icon ion-ios7-more">
            </button>
            <button class="button button-icon icon ion-ios7-reloading" ng-show="loading > 0">
            </button>
        </ion-nav-buttons>


    </ion-nav-bar>
    <!--<ion-nav-view name="mainContent" animation="slide-left-right"></ion-nav-view>-->
    <ion-nav-view name="mainContent"></ion-nav-view>

</ion-side-menu-content>

<ion-side-menu side="left">
    <ion-header-bar class="bar-positive">
        <h1 class="title">Navigate</h1>
    </ion-header-bar>

    <ion-content class="has-header">
        <ion-list>
            <ion-item nav-clear menu-close ui-sref="app.one">one</ion-item>
            <ion-item nav-clear menu-close ui-sref="app.two">two</ion-item>
            <ion-item nav-clear menu-close ui-sref="app.three">three</ion-item>
         
                <button class="button button-icon icon ion-ios7-settings-strong"></button>
                Settings
            </ion-item>
        </ion-list>
    </ion-content>
</ion-side-menu>
<ion-side-menu side="right">
    <ion-header-bar class="bar-positive">
        <h1 class="title">Navigate</h1>
        <button menu-close class="button button-icon icon ion-ios7-reload" ng-click="vm.loadAll(true)">
        </button>
    </ion-header-bar>


    <ion-content class="has-header">
        <ion-list>
           <ion-item nav-clear menu-close ui-sref="app.four">four</ion-item>
            <ion-item nav-clear menu-close ui-sref="app.five">five</ion-item>
            <ion-item nav-clear menu-close ui-sref="app.six">six</ion-item>
        </ion-list>
    </ion-content>
</ion-side-menu>

The hamburger menu and back button disappear when I navigate, and back doesn’t even seem to work. Any ideas? Is there a sample of a side menu with left and right enabled? Thanks.

6

Here’s a codepen that shows going from 13 to 14 breaks the hamburger menu and the back button.

Simply change 1.0.0-beta.14 to 1.0.0-beta.13 and it will work again.

7

Hi @TechnoTim, in beta.14 you can put ion-nav-buttons only in a ion-nav-bar (if you want they have to be always shown) or imediately before ion-content (if you want buttons only for a specific view) inside of a ion-view.

Here’s the codepen:

8

Thanks for this. I am getting closer. My back button keeps saying undefined (and doesn’t work) and the buttons don’t always appear when navigating but refreshing the same shows them. I was able to take the sidemenu template from ionic start and make it work, so now I need to figure out what is going on in my code. Thanks!

9

I fixed it. Thanks for the help everyone. After fixing my elements, my CSS was off. Works now. Here’s what the sidemenu template looks like with left and right menus for clarity. Left is using ui-sref.

    <ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      

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

      



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

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


    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>




  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item nav-clear menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item nav-clear menu-close ui-sref="app.search">
          Search
        </ion-item>
        <ion-item nav-clear menu-close ui-sref="app.browse">
          Browse
        </ion-item>
        <ion-item nav-clear menu-close ui-sref="app.playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>



 <ion-side-menu side="right">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Right</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item nav-clear menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>


</ion-side-menus>
2 Likes