服务的离子模态窗 [英] Ionic modal windows from service

问题描述

好吧，我有以下问题，我有一个模型窗口，我可以从控制器访问，问题是我需要它可以从多个控制器访问，所以我想，也许我可以创建我可以注入我的控制器并从那里调用模态的工厂吗？所以我尝试了以下内容：

Well, I'm having the following problem, i have a model windows that i can access form a controller, the problem is i need it to be accessible from more than one controller, so i thought to myself, "maybe i can create factory that i can inject into my controller and call the modal from there?" and so i tried the following :

.factory('FSTestService', function ($rootScope, $ionicModal) {


    var completed = false;
    var loggedIn = false;


    // Create the ILS questionnaire modal that we will use later
    $ionicModal.fromTemplateUrl('templates/FS-Form-container.html', {
        scope: $rootScope
    }).then(function (modal) {

        $rootScope.FSModal = modal;

    });


    return {
        FSFrom: function () {
            $rootScope.FSModal.show();
        }
    }


})

然后在我尝试的控制器上：

and then on the controller i tried:

.controller('CursosCtrl', function ($scope, CursosService, FSTestService) {

    FSTestService.FSForm;


})

但没有任何反应，如果我把FSForm称为函数，那就是sa y更改上述代码如下：

But nothing happens, and if i go and call the "FSForm" as a function, that is to say change the aforementioned code as follows:

.controller('CursosCtrl', function ($scope, CursosService, FSTestService) {  
    FSTestService.FSForm();

})

我到处都是一堆错误，所以我的问题是，这甚至可能吗？什么是标准的进行方式？。

I just get a bunch of error everywhere, so my question is, is this even possible ? what would be the standard way to proceed ?.

推荐答案

我目前正在研究同样的问题，发现此解决方案。我知道我已经很晚了，但迟到总比没有好！

I am currently looking into the same problem and found this solution. I know I'm pretty late on this, but better late than never!

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

这只是调用$ scope.modal1（）或$的问题scope.modal2（）来自你的标记。

It's then just a matter of calling $scope.modal1() or $scope.modal2() from your markup.

这篇关于服务的离子模态窗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！