CODEWITHSUNDEEP
ionic-framework
Coleson
Coleson

Reputation: 3

ui-router issue, cant load child view from tab

Im trying to get a single nested view to load within a tab and it seems that anything I try it will not load the template. Im trying to pass a param from my main tab view to load a child view and display it. The page never loads but i see that the url has changed with my selected value from the list. I have followed the example from ionic tabs starter exactly, but this darn thing will not show the child page.

Here is my app.js with the appropriate code minus everything else.

// setup an abstract state for the tabs directive
.state('options', {
  url: "/options",
  abstract: true,
  templateUrl: "templates/options-tabs.html"
})


// Each tab has its own nav history stack:

.state('options.create', {
  url: '/create',
  views: {
    'options-create': {
      templateUrl: 'templates/options-create.html',
      controller: 'CreateCtrl'
    }
  }
})

.state('options.confirm', {
  url: '/confirm/:id',
  views: {
    'options-confirm': {
      templateUrl: 'templates/options-confirm.html',
      controller: 'ConfirmCtrl'
    }
  }
})

.state('options.local', {
  url: '/local',
  views: {
    'options-local': {
      templateUrl: 'templates/options-local.html',
      controller: 'LocalAuditCtrl'
    }
  }
})

My Controller

.controller('CreateCtrl', function($scope,$location,$state,rest) { rest.getBases().success(function(data){ $scope.bases = data; });

$scope.test = function(account){
  console.log(account);
  $state.go('options.confirm', {id:account});
}

})

My Main Tab View

<ion-view title="Create">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="base in bases" type="item-text-wrap" ng-click="test(base.account)">
        {{base.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Details View

<ion-view title="{{id}}">
  <ion-content has-header="true" padding="true">
  </ion-content>
</ion-view>

At this point Im completely confused on how this can be wrong following the example from Ionic but Im sure there is something Im missing =( Any help would be awesome!

Upvotes: 0

Views: 586

Answers (1)

mizdler
mizdler

Reputation: 631

I had this problem and after 3 hours of debugging I found out that your top state (the abstract one) must be <ion-nav-view/>.

Ionic's doc doesn't mention it at all!

Try to include this in the index.html file.

Upvotes: 3

Related Questions