Xalsar Xalsar - 1 month ago 16
CoffeeScript Question

Multiple abstract views does not work - Ionic

I have done this project with ionic where there are multiple abstract views one inside another. But it does not work, although I do it exactly like this post

angular_app = angular.module 'starter'

angular_app.config ($stateProvider,$urlRouterProvider)->
$stateProvider
.state 'tab',{
url : '/tab'
abstract : true
templateUrl : 'templates/tabs.html'
}
.state 'tab.home',{
url : '/home'
views : {
'tab-home' : {
templateUrl : 'templates/home.html'
}
}
}
.state 'tab.searcher',{
url : '/searcher'
abstract : true
templateUrl : 'templates/template-searcher.html'
}
.state 'tab.searcher.ingredients',{
url : '/ingredients'
views : {
'tab-ingredients' : {
templateUrl : 'templates/ingredients-searcher.html'
}
}
}
return

Answer

From the tab.home definition we can infer that in tab there must be a named tab-home ui-view. tab.searcher is a child of tab with it's own template, but it is not inserted in the named ui-view.

I added a snippet where I mimic your state configuration and make the minimal changes, which I assume must be logically given to make sense (named ui-views in templates, and views definitions in state objects).

Please have a look, and let me know if there are other issues.

angular.module('TestApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
      .state('tab', {
        url: '/tab',
        abstract: true,
        template: '<div ui-view="tab-home"></div>'
      })
      .state('tab.home', {
        url: '/home',
        views: {
          'tab-home': {template: 'Tab Home'}
        }
      })
      .state('tab.searcher', {
        url: '/searcher',
        abstract: true,
        views: {
          'tab-home': {
            template: 'Tab Searcher <div ui-view="tab-ingredients"></div>'
          }
        }
      })
      .state('tab.searcher.ingredients', {
        url: '/ingredients',
        views: {
          'tab-ingredients': {template: 'Ingredients!'}
        }
      });

    //$urlRouterProvider.otherwise("/tab/home");
    $urlRouterProvider.otherwise("/tab/searcher/ingredients");
    //$locationProvider.html5Mode(true);
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.js"></script>
<script src="https://unpkg.com/angular-ui-router@0.3.1/release/angular-ui-router.js"></script>

<div ng-app="TestApp">
  <div ui-view></div>
</div>

Note that it is also possible to directly define which named ui-view should render the template. E.g.: Set template for the named ui-view root in state a. Set template for the named ui-view nav in b

.state('a.b.c', {
   // ...
   views: {
      'root@a': {template:'Foo'},
      'nav@b': {template:'Bar'}
   }
})
Comments