0

我对离子非常陌生，而不是有角度的专业人士。我正在尝试为可以从控制器调用的弹出窗口创建服务。我正在使用一项服务，因为多个控制器可能需要使用弹出窗口，并且我可能需要不同类型的弹出窗口。我什至不确定这是正确的方法，请原谅我，但我正在尝试。我希望该服务将已单击哪个按钮（确定/取消）传递回控制器，以便可以添加或不添加案例。

非常感谢。

弹出服务

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

2 回答 2

1

您是否尝试过使用 $q 在您的服务中创建一个可以在弹出窗口解析处理程序中解决的延迟承诺？

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

于 2016-03-15T18:48:32.583 回答
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

于 2016-02-10T04:53:31.673 回答