Ion-tabs error in 1.0.0-beta.1


#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">

Error when loading page
#2

Hi,

Can you show us your html markup?


#3

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


#4

@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>

#5

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.


#6

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


Uncaught Error loading ionTabs
#7

I tried to downgrade jQuery to 1.11.0 and it works.


#8

Same Issue, same answer :slight_smile:


#9

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.


#10

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…


#11

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'
                }
            }
        });