离子模态删除和动画不起作用答案

【问题标题】：ionic modal remove and animation is not working离子模态删除和动画不起作用
【发布时间】：2018-04-12 13:06:04
【问题描述】：

我正在使用离子模态，一旦我打开离子模态并提交按钮，离子删除模型就无法正常工作，甚至动画在模态中也无法正常工作。我尝试使用离子隐藏而不是删除但是仍然无法正常工作，谁能告诉我离子模态的问题是什么。

模态：

'use strict';
(function () {
      angular.module('main')
     .service('ModalService', ModalService);
     ModalService.$inject = ['$ionicModal', '$log'];
     function ModalService ($ionicModal, $log) {
    var init = function (tpl, $scope) {
      var promise;
      var a = $scope;
      $scope = a;

      promise = $ionicModal.fromTemplateUrl(tpl, {
        scope: $scope,
        animation: 'slide-in-right'
      }).then(function (modal) {
        $scope.modal = modal;
        return modal;
      });

      $scope.openModal = function () {
        $log.log('openModal function got clicked', $scope);
        $scope.modal.show();
      };

      $scope.closeModal = function () {
        $scope.modal.hide();
      };

      $scope.removeModal = function () {
        $scope.modal.remove();
      };

      $scope.$on('$destroy', function () {
        $scope.modal.remove();
      });

      return promise;
    };

    return {
      init: init
    };
  }
})();

控制器调用离子删除和隐藏：

function modalFunction (htmlpath) {
  vm.modalListType = 'category';
  ModalService
    .init(htmlpath, $scope)
    .then(function (modal) {
      $log.log('modal success');
      catModal = modal;
      catModal.show();
      vm.search = '';
    });
}

function closeModal () {
  catModal.hide();
}

function removeModal () {
  $log.log('removeModal got called', catModal);
  catModal.remove();
}

HTML 文件：

<div class="center-align">
      <button class="button trans-but m-t-10" type="submit" ng-click="vm.addProduct()">{{'save_message' | translate}}</button>
    </div>

调用remove函数的函数：

function addProduct () {
  $log.log('addProduct called: ', vm.product);
  var data = [];
  data.push({field: vm.product.type, type: 'text', name: $translate.instant('{{"producttype_message" | translate}}')});
  data.push({field: vm.product.count, type: 'num', amounttype: 'Advance', name: $translate.instant('{{"ecount_message" | translate}}')});
  data.push({field: vm.product.rate, type: 'num', amounttype: 'Advance', name: $translate.instant('{{"eprice_message" | translate}}')});
  CommonService.validate(data).then(function () {
    //vm.product.total = (vm.product.count - vm.product.deduction) * vm.product.rate;
    vm.products.push(vm.product);
    closeModal();
    removeModal();
  }, function (err) {
    cordova.plugins.Keyboard.close();
    CommonService.toast(err);
  });
}

【问题讨论】：

标签： javascript jquery cordova ionic-framework

【解决方案1】：

如果您尝试使用该功能关闭模态，$scope.modal.hide(); 因为如果你使用remove()，你将不得不再次创建模态。

一个可能的解决方案是：

function closeModal () {
  $scope.modal.hide();
}

或者

function closeModal () {
  $scope.modal.remove();
}

这将在您的 modalFunction 控制器中。

【讨论】：