Ion-tabs error in 1.0.0-beta.1

I found an issue when tried to use ion-tabs

Error: [$compile:ctreq] Controller 'ionTabs', required by directive 'ngClass', can't be found!
  http://errors.angularjs.org/1.2.12/$compile/ctreq?p0=ionTabs&p1=ngClass
at http://127.0.0.1:9000/bower_components/angular/angular.js:78:12
at getControllers (http://127.0.0.1:9000/bower_components/angular/angular.js:6060:19)
at http://127.0.0.1:9000/bower_components/angular/angular.js:6068:24
at Array.forEach (native)
at forEach (http://127.0.0.1:9000/bower_components/angular/angular.js:303:11)
at getControllers (http://127.0.0.1:9000/bower_components/angular/angular.js:6067:11)
at nodeLinkFn (http://127.0.0.1:9000/bower_components/angular/angular.js:6231:35)
at compositeLinkFn (http://127.0.0.1:9000/bower_components/angular/angular.js:5640:15)
at publicLinkFn (http://127.0.0.1:9000/bower_components/angular/angular.js:5545:30)
at link (http://127.0.0.1:9000/bower_components/ionic/release/js/ionic-angular.js:4800:61) <a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge}" class="tab-item" icon-on="ion-ios7-information" icon-off="ion-ios7-information-outline">

Hi,

Can you show us your html markup?

I have the same issue and my markup looks like

<ion-view title="Fixture">
  <ion-tabs class="tabs-icon-top">
    <!-- Pets Tab -->
    <ion-tab title="Dashboard" icon="icon ion-home" href="#/tab/dash">
      <ion-nav-view name="tab-dash"></ion-nav-view>
    </ion-tab>
    <!-- Adopt Tab -->
    <ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
      <ion-nav-view name="tab-friends"></ion-nav-view>
    </ion-tab>
    <!-- About 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>
</ion-view>

I have a side menu that contains all and this tab is embed in some controllers only, so my routes looks like

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  // Setup an abstract state for the slide menu
  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'MenuCtrl'
  })
  // Setup an abstract state for the tabs directive
  .state('app.tab', {
    url: "/tab",
    abstract: true,
    views: {
      'menuContent' : {
        templateUrl: 'templates/tabs.html'
      }
    }
  })
  // News
  .state('app.news-index', {
    url: '/news',
    views: {
      'menuContent' : {
        templateUrl: 'templates/news-index.html',
        controller: 'NewsIndexCtrl'
      }
    }
  })
  // Fixture
  .state('app.tab.fixture', {
    url: '/fixture/:id',
    views: {
      'tab-fixture' : {
        templateUrl: 'templates/fixture.html',
        controller: 'FixtureCtrl'
      }
    }
  })
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/news');
});

Regards

@andy I just used html code from example

<ion-tabs class="tabs-positive tabs-icon-only">

<ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<!-- Tab 1 content -->
</ion-tab>

<ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
  <!-- Tab 2 content -->
</ion-tab>

<ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
  <!-- Tab 3 content -->
</ion-tab>

So this is directly related to the version of jQuery you’re loading. I don’t know why, or how it’s causing the issue, but if you use jQuery 2.* you’ll get this error. If you load jQuery 1.11.* it works.

No idea why.

1 Like

Yup, I’m also having this issue with jquery 2.*

I tried to downgrade jQuery to 1.11.0 and it works.

Same Issue, same answer :slight_smile:

Same issue… how can this be an acceptable answer? jQuery is a de facto standard and it’s a bug IMHO if ionic doesn’t interop nicely with it.

I have the same problem too. using “jquery”: “~2.1.1”

any workaround without downgrading to jquery 1.11.0.

though in the near future, my app might not use jquery anymore…

Have similar issue. Tried downgrade but still getting this error, in v1.0.0-beta.4

Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!

Only the first tab ‘Home’ is loaded. The Compose icon highlights, but no template or controller is loaded.

My HTML - app.html

<ion-tabs class="tabs-icon-top tabs-dark">
 <ion-tab title="Home" icon="ion-home" ui-sref="app.home" ng-show="isLoggedIn">
  <ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Compose" icon="ion-plus-circled"  ui-sref="app.compose">
  <ion-nav-view name="compose-tab"></ion-nav-view>
 </ion-tab>
</ion-tabs>

And my app.js route declarations

.state('app', {
        url: "app",
        abstract: true,
        templateUrl: "templates/app.html",
        controller: 'MenuCtrl'
    })
        .state('app.home', {
            views: {
                'home-tab': {
                    templateUrl: "templates/home.html",
                    controller: 'HomeCtrl'
                }
            }
        })

        .state('app.compose', {
           
            views: {
                'compose-tab': {
                    templateUrl: "templates/compose.html",
                    controller: 'ComposeCtrl'
                }
            }
        });