2016-02-09 29 views
0

我对离子非常陌生,而不是一个有角度的pro。我正在尝试创建一个可以从控制器调用的弹出式窗口服务。我正在使用服务,因为多个控制器可能需要使用弹出窗口,而且我可能需要不同种类的弹出窗口。我甚至不确定这是否正确,请原谅我,但我正在试验。我希望服务返回到控制器哪个按钮(确定/取消)已被点击,因此可以添加或不添加一个案例。创建一个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