Show Ionic Modal From Inside an Ionic Tab

0
votes

How do I open a modal from inside a tab's view-title, ion-nav-buttons? for example:

<ion-view view-title="Users">
    <ion-nav-buttons side="primary">
        <button class="button button-icon icon ion-ios-minus-outline" 
            ng-click="openModal()"></button>       
    </ion-nav-buttons>
...

I followed How to open an Ionic Modal from an Ionic Tab but it creates a tab that when pressed calls openModal(). I want to call openModal from a button on the title bar. I would also like to create only one controller for the modal that can be called from each tab. Is this possible and how would it be done?

Also note, I plan to show a list of objects in the modal. When an object is selected it will change the content of the tabs. Let me know if there might be an easier way to accomplish what I'm trying other than a modal.

Thanks! Mike

To further clarify

I’m new to Ionic and obviously I’m missing a key concept. In the below code I don’t know how to call methods that exist in another controller. For example, in the below code I don't know how to call the ModalController's openModal method from the FriendsCtrl's openModal method? Please see the below FriendsCtrl's openModal method.

Here's my code...

Tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

    <!-- Chats Tab -->
    <ion-tab title="Friends" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/friends">
        <ion-nav-view name="tab-friends"></ion-nav-view>
    </ion-tab>

</ion-tabs>

Tabs-Friends.html

<ion-view view-title="Friends">
    <ion-nav-buttons side="primary">
        <button class="button button-icon icon ion-ios-minus-outline" ng-click="openModal()"></button>
    </ion-nav-buttons>
    <ion-content>
…
    </ion-content>
</ion-view>

Modal-template.html

<ion-modal-view>
    <ion-header-bar class="bar-positive">
        <h1 class="title">Ionic Modal</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="closeModal()">Close</button>
        </div>
    </ion-header-bar>
</ion-modal-view>

Controllers.js

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

.controller('HomePageCtrl', function ($scope, $window) {
    $scope.openInBrowser = function (URL) {
          $window.open(URL, '_system')
    }
})

.controller('FriendsCtrl', function ($scope, $window, TodoList) {
    …

// breakpoint verifies function called in debugger when the button is pressed. 
// However, I don't know how to call the ModalController’s $scope.openModal from here?

$scope.openModal= function () { 
        $scope.modal.show();// to display ionic modal use it 
}

})
.controller('ModalController', function ($scope, $timeout, $state, $ionicModal) {
     //give same file name as your modal html file
     $ionicModal.fromTemplateUrl('modal-template.html', {
         scope: $scope
     }).then(function (modal) {
         $scope.modal = modal;
     });

    $scope.openModal= function () { 
        $scope.modal.show();// to display ionic modal use it 
    }
     $scope.modal.show();// to display ionic modal use it
     $scope.closeModal = function () {
         $scope.modal.hide();// to hide ionic modal use it
     }
 });

Thanks for any help you can give.

2
ionic-framework

2 Answers

0
votes

Ok, I resolved my issue by watching video AngularJS - Communicating Between Controllers. In summary I created a shared service that is injected into controllers. Controllers then use that service to broadcasts/handle messages between controllers.

Below is relevant code:

Controllers.js

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

.controller('FriendsCtrl', function ($scope, $window, TodoList, GroupService) {

    $scope.openModal = function () {
        GroupService.prepForOpenModal();
    };
    …

})

.controller('TabsCtrl', function ($scope, $ionicModal, GroupService) {

    $scope.modal = null;

    $ionicModal.fromTemplateUrl('templates/modal-template.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    $scope.$on('handleBroadcast_OpenModal', function() {
        $scope.modal.show();
    });

    $scope.closeModal = function () {
        $scope.modal.hide();
    };
});

Services.js

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

.factory('TodoList', function ($ionicPopup) {
    …
})


.factory('GroupService', function ($rootScope) {
    var GroupService = {};
    GroupService.groupName = '';
    GroupService.groupId = '';

    GroupService.prepForOpenModal = function () {
        $rootScope.$broadcast('handleBroadcast_OpenModal');
    };

    return GroupService;
});

Controllers.js

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

.controller('FriendsCtrl', function ($scope, $window, TodoList, GroupService) {
    …

    $scope.openModal = function () {
        GroupService.prepForOpenModal();
    };

})

.controller('TabsCtrl', function ($scope, $ionicModal, GroupService) {

    $scope.modal = null;

    $ionicModal.fromTemplateUrl('templates/modal-template.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    $scope.$on('handleBroadcast_OpenModal', function() {
        $scope.modal.show();
    });

    $scope.openMyModal = function () {
        $scope.modal.show();
    };

    $scope.closeModal = function () {
        $scope.modal.hide();
    };
});

Tab-friends.html

<ion-view view-title="Friends">
    <ion-nav-buttons side="primary">
        <button class="button button-icon icon ion-ios-minus-outline" ng-click="openModal()"></button>
    </ion-nav-buttons>
    <ion-content>
        …
    </ion-content>
</ion-view>

Modal-template.html

<ion-modal-view>
    <ion-header-bar class="bar-positive">
        <h1 class="title">Ionic Modal</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="closeModal()">Close</button>
        </div>
    </ion-header-bar>
</ion-modal-view>

Please let me know if there is an easier way. Thanks for your help Mahesh!

0
votes

Create new Html page put this html into file.

   <ion-modal-view>
   <ion-header-bar class="bar-positive">
   <h1 class="title">Ionic Modal</h1>
   <div class="buttons">
   <button class="button button-clear" ng-click="closeModal()">Close</button>
  </div>
 </ion-header-bar> 
 </ion-modal-view>

In Controller

 .controller('FriendsCtrl', function($scope,$timeout,$state,$ionicModal) {
 //give same file name as your modal html file
 $ionicModal.fromTemplateUrl('templates/IonicModal.html', {
    scope: $scope
   }).then(function (modal) {
    $scope.modal = modal;
    });
   $scope.modal.show();// to display ionic modal use it
    $scope.closeModal = function () {
    $scope.modal.hide();// to hide ionic modal use it
    }
  });