Ionic view inheritance between different states


I am working on an application, and I want to know whether the following case is possible or not. If it is possible can anyone shown me any simple example.

I have an applicaiton state named vehicle state. This is an abstract state. There are three child states defined for this parent state, namely car, truck and bus.

The vehicle state is having a template, vehicleTemplate.html
In that template there is something like

<!-- load the items here based on the template -->
<ion-view name="vehicle"></ion-view>

In car state template

<ion-item ng-repeat="vehicle in vehicles">
<!-- some styling based on the car design -->

In truck state template

<ion-item ng-repeat="vehicle in vehicles">
<!-- some styling based on the truck design -->

And so on

The json data ( vehicle resource ) is same just styling is different

I will define in app.js

.state('app.vehicle', {
    url: '/vehicle',
    abstract: true,
    templateUrl: 'templates/vehicle.html',
    controller: 'VehicleCtrl'

.state('', {
    url: '/vehicle',
    abstract: true,
    views: {
      'vehicle': {
        templateUrl: 'templates/car.html'
.state('app.vehicle.truck', {
    url: '/vehicle',
    abstract: true,
    views: {
      'vehicle': {
        templateUrl: 'templates/truck.html'

.state('app.vehicle.bus', {
    url: '/vehicle',
    abstract: true,
    views: {
      'vehicle': {
        templateUrl: 'templates/bus.html'

@spanhawk In my opinion the best way to abstract views is creating reusable directive. I show you mine, which could be more compicated, than you need.

var ListView_Template_Const =
'<ion-view view-title="{{Title}}">'+
    '<ion-nav-buttons side="secondary">'+
        '<button ng-repeat="button in Buttons" ng-click="button.action()" ng-class="\'button button-icon icon \' + button.icon"> {{button.text}} </button>'+
        '<button class="button button-icon ion-ios7-plus-empty" ng-if="ButtonsDropDown.length" ng-click="showPopover($event)"></button>'+

    '<form name="searchForm" novalidate ng-submit="Search(query)">'+
        '<ion-header-bar class="bar bar-subheader item-input-inset" ng-show="searchVisibility">'+
            '<label class="item-input-wrapper">'+
                '<i class="icon ion-ios7-search placeholder-icon"></i>'+
                '<input type="text" placeholder="Szukaj" ng-model="query" required>'+
            '<button type="submit" class="button button-icon icon ion-ios7-checkmark-empty"></button>'+
    '<ion-content class="has-header has-subheader">'+
        '<ion-list ng-transclude> </ion-list>'+
        '<ion-infinite-scroll ng-if="CanLoadMore()" on-infinite="LoadMore()" distance="10%"></ion-infinite-scroll>'+

.directive(‘listView’, function() {
return {
replace: true,
restrict: ‘E’,
/scope: {
Title: ‘@’,
Buttons: ‘=’,
ButtonsDropDown: ‘=’,
Search: ‘&’,
Refresh: ‘&’,
CanLoadMore: ‘&’,
LoadMore: ‘&’
transclude: true,
template: ListView_Template_Const,
link: function(scope, element, attrs) {
scope.searchVisibility = angular.isDefined(;
controller : function($scope, ActionsPopover) {
var actionsPopover = new ActionsPopover();

            $scope.showPopover = function ($event) {
            $scope.$on('$destroy', function () {


You can use it in this way:

<list-view title={{::Title}}
       can-load-more="CanLoadMore()" load-more="LoadMore()">
<ion-item class="my-item"
          collection-repeat="item in Items"

Thanks @bjedrzejak

I had completely forgotten that something like ‘directives’ exist in this world :stuck_out_tongue:


Does this work view-title="{{name.value}} without using your directive method? I’m having problems using it with a view and controller.