CODEWITHSUNDEEP
angularjsionic-frameworkangular-servicesionic-popup
Chris
Chris

Reputation: 3293

Creating a ionicPopup service

I am very new to ionic and not a pro with angular. I am trying to create a service for popups that I can call from a controller. I am using a service because multiple controllers may need to use the popups and I may need different kinds of popups. I'm not even sure this is the right approach please forgive me but I'm experimenting. I would like the service to pass back to the controller which button (Ok/Cancel) has been clicked so a case can be added or not.

Many thanks.

popupService

angular.module('services')
.service('popupService', function ($ionicPopup) {

    return {

        createCasePopup : function () {

            $ionicPopup.show({

                cssClass: 'custom-popup',
                title: 'Create Case',
                subTitle: 'Are you sure you want to create this case?',
                buttons: [
                        {
                            text: 'Cancel',
                            onTap: function (e) {
                                return 'cancel button pressed';
                            }
                        },
                        {
                            text: 'Ok',
                            type: 'button-positive',
                            onTap: function (e) {
                                return 'ok button pressed';
                            }
                        },
                        ]
            }).then(
            function (res) {

                console.log(res);

            },
            function (err) {

                console.log('Err:', err);

            },
            function (msg) {

                console.log('message:', msg);
            });
        }

    }

});

Controller

$scope.addCase = function () {

        // this line to return which button has been clicked?
        var createCase = popupService.createCasePopup();

        if (createCase && $scope.case) {
           caseService.add($scope.case);
        }
    };

Upvotes: 0

Views: 1631

Answers (2)

Robert Waddell
Robert Waddell

Reputation: 854

Have you tried using $q to create a deferred promise in your service which can be resolved in the popups resolution handler?

See plunker here: https://embed.plnkr.co/lIB5YaefJLRUCtrMyux7/

Upvotes: 1

Tummala Krishna Kishore
Tummala Krishna Kishore

Reputation: 8271

As you want a Popup that too from service the Best ideal way for you is $ionicModal

Here is a working example.

HTML

<html ng-app="evenementoApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Modal inside service</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>

  </head>
  <body>

    <ion-header-bar>
      <h1 class="title">Modal from service</h1>  

    </ion-header-bar>

    <ion-content class="padding" ng-controller="MainCtrl">
      <button ng-click="modal1()" class="button button-block button-light">
        Modal #1
      </button>
       <button ng-click="modal2()" class="button button-block button-light">
        Modal #2
      </button>
    </ion-content>

    <script type="text/ng-template" id="modal1.html">
      <div class="modal">
        <ion-header-bar>
          <h1 class="title">Hi, I'm modal #1!</h1>  
          <div class="buttons"><button class="button button-icon ion-ios7-close-empty" ng-click="closeModal()"></button></div>
        </ion-header-bar>
      </div>
    </script>

    <script type="text/ng-template" id="modal2.html">
      <div class="modal">
        <ion-header-bar>
          <h1 class="title">Hi, I'm modal #2!</h1>  
          <div class="buttons"><button class="button button-icon ion-ios7-close-empty" ng-click="closeModal()"></button></div>
        </ion-header-bar>
        <ion-content class="padding">
          ...and I have own scope.
        </ion-content>
      </div>
    </script>

  </body>
</html>

JS

angular.module('evenementoApp', ['ionic'])

.service('ModalService', function($ionicModal, $rootScope) {


  var init = function(tpl, $scope) {

    var promise;
    $scope = $scope || $rootScope.$new();

    promise = $ionicModal.fromTemplateUrl(tpl, {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
      return modal;
    });

    $scope.openModal = function() {
       $scope.modal.show();
     };
     $scope.closeModal = function() {
       $scope.modal.hide();
     };
     $scope.$on('$destroy', function() {
       $scope.modal.remove();
     });

    return promise;
  }

  return {
    init: init
  }

})

.controller('MainCtrl', function($scope, ModalService) {

  $scope.modal1 = function() {
    ModalService
      .init('modal1.html', $scope)
      .then(function(modal) {
        modal.show();
      });
  };

  $scope.modal2 = function() {
    ModalService
      .init('modal2.html')
      .then(function(modal) {
        modal.show();
      });
  };

})

Here is a working CodePen

Upvotes: -1

Related Questions