我应该在哪里将模态代码移动到Ionic中？ [英] Where should I move the modal code to in Ionic?

问题描述

在我的控制器中，我有两个已启动的模态。其中一个的代码是：

In my controller, I have two modals that are launched. The code for one of them is:

   function setUpEditCommentModal() {
        $ionicModal.fromTemplateUrl('app/recent/edit-comment-modal.html', {
            scope: $scope, // so close methods available.
            animation: 'fade-in-scale'
        }).then(function (modal) {
            $scope.editCommentModal = modal;
        });

        $scope.closeEditCommentModal = function () {
            $scope.editCommentModal.hide();
        };

        $scope.returnFromSavingCommentInModal = function () {
            var modifiedComment = commentSelector.getComment();
            vm.selectedComment.Comment = modifiedComment.Comment; // just note part.
            $scope.closeEditCommentModal();
        };

        //Cleanup the modal when we're done with it!
        $scope.$on('$destroy', function () {
            $scope.editCommentModal.remove();
        });

        // Execute action on hide modal
        $scope.$on('modal.hidden', function () {
            // Execute action
            $ionicListDelegate.closeOptionButtons();
        });

        // Execute action on remove modal
        $scope.$on('modal.removed', function () {
            // Execute action
        });
    }

，其他模态代码甚至更长。
重构此代码的最佳方法是什么，以便我的控制器类不会太大？

and the other modal code is even longer. What is the best way to refactor this code so that my controller class is not too big?

我应该将此代码移动到服务中吗？

Should I move this code into a service?

推荐答案

您可以创建一个 ModalService ，它将具有 register（）方法。这可以一次注册多个模态并返回一个承诺。 promise的ressolved值可以在本地保存，也可以通过服务引用使用。为了通过引用使用它，我们需要存储服务中所有当前活动模态的列表。该服务将如下所示：

You can create a ModalService which will have a register() method. This can register multiple modals at a time and return a promise. The ressolved value of the promise can be either saved locally or can be used by reference from the service. In order to use it via reference, we need to store a list of all the currently active modals in the service. The service will look something like below:

.factory('ModalService', function ($ionicModal) {
  return {
    register: register
  };

  // TODO: Add an array to store list of all active modals
  // and use it to  manipulate the modal `open()`, `close()` methods

  function register (config) {
    return $ionicModal.fromTemplateUrl(config.templateUrl, {
      scope: config.scope,
      animation: config.animation
    });
  }
});

使用上述工厂的控制器中2个模态的​​更简单实现存在于此JSBin中： https://jsbin.com/busepey/2/edit?html,js,output 。此外，您可以在服务中的本地数组中实现活动模态列表，并根据新/删除的模态添加或删除。

The simpler implementation for 2 modals in a controller using the above factory is present in this JSBin: https://jsbin.com/busepey/2/edit?html,js,output. Additionally you can implement the list of active modals in a local array within the service and add or remove based on new/ deleted modals.

更新：为显示模式的可重用方法提供服务： https：// forum。 ionicframework.com/t/ionic-modal-service-with-extras/15357

UPDATE: Service for reusable method to show modals : https://forum.ionicframework.com/t/ionic-modal-service-with-extras/15357

这篇关于我应该在哪里将模态代码移动到Ionic中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！