2016-02-09 4 views
0

Я очень новичок в ионной и не про с угловой. Я пытаюсь создать службу для всплывающих окон, которые я могу вызвать из контроллера. Я использую службу, потому что нескольким контроллерам может потребоваться использование всплывающих окон, и мне могут понадобиться разные всплывающие окна. Я даже не уверен, что это правильный подход, пожалуйста, простите меня, но я экспериментирую. Я хотел бы, чтобы служба вернулась к контроллеру, на которую нажата кнопка (Ok/Cancel), чтобы можно было добавить случай или нет.Создание ionicPopup службы

Большое спасибо.

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); 
      }); 
     } 

    } 

});

Контроллер

$scope.addCase = function() { 

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

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

ответ

0

Как вы хотите, всплывающее окно, которое тоже от службы Лучший идеальный способ для вас $ ionicModal

Вот рабочий пример.

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(); 
     }); 
    }; 

}) 

Здесь рабочий CodePen

0

Вы пробовали с помощью $ Q, чтобы создать отложенный обещание в службе, которая может быть разрешено в обработчике разрешения всплывающих окон?

См. Плункер здесь: https://embed.plnkr.co/lIB5YaefJLRUCtrMyux7/

 Смежные вопросы

  • Нет связанных вопросов^_^