Question

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

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


})

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

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

    FSTestService.FSForm;


})

但没有任何反应，如果我将“FSForm”称为函数，也就是说更改上述代码如下：

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

})

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

Answer 1

我目前正在研究同样的问题并找到this solution。我知道我已经很晚了，但迟到总比没有好！

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（）的问题。

Answer 2

基于这个问题和其他需求，我创建了一个有用的服务。

请参阅此帖子：Ionic modal service

或查看操作：CodePen

(function () {
'use strict';

var serviceId = 'appModalService';
angular.module('app').factory(serviceId, [
    '$ionicModal', '$rootScope', '$q', '$injector', '$controller', appModalService
]);

function appModalService($ionicModal, $rootScope, $q, $injector, $controller) {

    return {
        show: show
    }

    function show(templateUrl, controller, parameters) {
        // Grab the injector and create a new scope
        var deferred = $q.defer(),
            ctrlInstance,
            modalScope = $rootScope.$new(),
            thisScopeId = modalScope.$id;

        $ionicModal.fromTemplateUrl(templateUrl, {
            scope: modalScope,
            animation: 'slide-in-up'
        }).then(function (modal) {
            modalScope.modal = modal;

            modalScope.openModal = function () {
                modalScope.modal.show();
            };
            modalScope.closeModal = function (result) {
                deferred.resolve(result);
                modalScope.modal.hide();
        };
        modalScope.$on('modal.hidden', function (thisModal) {
            if (thisModal.currentScope) {
                var modalScopeId = thisModal.currentScope.$id;
                if (thisScopeId === modalScopeId) {
                    deferred.resolve(null);
                    _cleanup(thisModal.currentScope);
                }
            }
        });

        // Invoke the controller
        var locals = { '$scope': modalScope, 'parameters': parameters };
        var ctrlEval = _evalController(controller);
        ctrlInstance = $controller(controller, locals);
        if (ctrlEval.isControllerAs) {
            ctrlInstance.openModal = modalScope.openModal;
            ctrlInstance.closeModal = modalScope.closeModal;
        }

        modalScope.modal.show();

        }, function (err) {
            deferred.reject(err);
        });

        return deferred.promise;
    }

    function _cleanup(scope) {
        scope.$destroy();
        if (scope.modal) {
            scope.modal.remove();
        }
    }

    function _evalController(ctrlName) {
        var result = {
            isControllerAs: false,
            controllerName: '',
            propName: ''
        };
        var fragments = (ctrlName || '').trim().split(/\s+/);
        result.isControllerAs = fragments.length === 3 && (fragments[1] || '').toLowerCase() === 'as';
        if (result.isControllerAs) {
            result.controllerName = fragments[0];
            result.propName = fragments[2];
        } else {
            result.controllerName = ctrlName;
        }

        return result;
    }

  } // end
})();

服务的离子模态窗口

2 个答案: