Error: [$compile:ctreq] Controller 'ionNavBar', required by directive 'ionNavBackButton', can't be found!


#1

I just upgraded my app to Beta-14, and also decided to use the <ion-nav-bar> with the <ion-nav-back-button>. (I was using a <ion-header-bar> before, but wanted to take advantage of the back-button’s functionality and just basically make the app better.

Now, when I include the <ion-back-button> with NO markup - i.e., just the open and close tags, with no icon or text, everything’s fine. But, as soon as I add any markup to the <ion-nav-back-button>, then I get the error in the title of this post. This error appears whether I have the “global” nav-bar setup, or whether I include the <ion-nav-bar> in each <ion-view>.

Here’s the markup that generates the error. This is a side-menu app, with two side menus. Pages are loaded in the <ion-nav-view>, as required.

  <ion-side-menus enable-menu-with-back-views="true">
      <ion-side-menu-content ng-controller="ContentController">
	<ion-nav-bar class="bar-royal">
		<ion-nav-back-button class="button-icon button-clear">
		    <i class="ion-arrow-left-c"></i>Back
		<ion-nav-back-button>

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

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

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

      </ion-side-menu-content>

      <ion-side-menu side="left">
		...
      </ion-side-menu>

      <ion-side-menu side="right">
		...
      </ion-side-menu>
  </ion-side-menus>

And in my templates, each has an <ion-view> with some <ion-content>:

<ion-view view-title="Home">
    <ion-content>
    ...
    </ion-content>
</ion-view>

Any ideas as to why this is happening? I guess it doesn’t really matter if I don’t have a custom back-button, but it seems to be a new bug with Beta-14. Or, what am I doing wrong with my code?

Also, for all of this effort, I don’t actually see any Back button. When I go from a “home” state to any other view, from the menu, the hamburgers for my two menus appear, but no back button. I’m testing the app so far in FireFox Aurora 32. What do you actually need to do to have the Back button appear? Do you need to set up an Abstract state first, and then define child state views? Or can each state be a “regular” state, with templateUrl, Controller, etc.?

Thanks!


#2

Same error for me and using side-menu too.


#3

I found this is due to incorrect html. In your case the first nav button element is not closed, missing “/”


#4

Ah. Thank you! Always works when another set of eyes looks at the problem.