Question

我对离子很新，而不是有角度的专业人士。我正在尝试为弹出窗口创建一个可以从控制器调用的服务。我正在使用服务，因为多个控制器可能需要使用弹出窗口，我可能需要不同类型的弹出窗口。我甚至不确定这是正确的方法，请原谅我，但我正在尝试。我希望服务能够传回控制器，点击了按钮（确认/取消），这样就可以添加一个案例。

非常感谢。

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

Answer 1

您是否尝试过使用$ q在服务中创建延迟保证，可以在弹出解析处理程序中解决？

请在此处查看plunker：https://embed.plnkr.co/lIB5YaefJLRUCtrMyux7/

Answer 2

如果您想要一个也是服务的Popup，那么最好的理想方式是 $ 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

创建ionicPopup服务

2 个答案: