创建一个ionicPopup服务

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

非常感谢。

弹出服务

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

您是否

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

请参阅此处的 plunker：https://embed.plnkr.co/lIB5YaefJLRUCtrMyux7/

由于您想要一个弹出窗口，因此也来自服务，因此最适合您的方式是$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();
      });
  };
})

这是一个有效的代码笔

相关内容

最新更新

热门标签：