JSFiddle - React, Tailwind, and code Playground

by robmacprac

HTML

<ion-view title="'Pets'" right-buttons="rightButtons">
    <ion-content has-header="true" has-tabs="true">
        <ion-list>
            <ion-item type="item-text-wrap">
                <h3>Pet</h3>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

JavaScript

angular.module('starter', ['ionic', 'starter.services', 'starter.controllers'])


.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })

    // the pet tab has its own child nav-view and history
    .state('tab.pets-index', {
      url: '/pets',
      views: {
        'pets-tab': {
          templateUrl: 'templates/pets-index.html',
          controller: 'PetsIndexCtrl'
        }
      }
    })

    .state('tab.pet-detail', {
      url: '/pet/:idx',
      views: {
        'pets-tab': {
          templateUrl: 'templates/pet-detail.html',
          controller: 'PetDetailCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/pets');

});

angular.module('starter.controllers', ['ionic'])

.controller('PetsIndexCtrl', function($scope,$location,$ionicModal) {
    $ionicModal.fromTemplateUrl('templates/modal.html', function(modal) {
        $scope.modal = modal;
    },{
        animation: 'slide-in-up'
    });
    
    $scope.rightButtons = [{
        type: 'button-icon icon ion-navicon',
        tap: function(e) {
            $scope.modal.show();
        }
    }];
    
    $scope.closeModal = function() {
        console.log('Closing modal');
        $scope.modal.hide();
    };
});