Question

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

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

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

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

Answer 1

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

.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中。此外，您可以在服务中的本地数组中实现活动模态列表，并根据新/已删除的模态添加或删除。

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

我应该在哪里将模态代码移动到Ionic中？

1 个答案: