如何使用 Factory 在 mouseleave 上关闭 Angular-ui-bootstrap uibModal？

Question

我最近将我们应用程序中的所有模态指令都切换到了 Angular-ui-Bootstrap 模态。好多了，但是遇到了一种新的模态样式，它在鼠标离开时关闭而不是取消单击。

 this.leaveTag = (tag) => {
    TagHover.off();
};

this.hoverTag = (tag) => {
    TagHover.display();
};

以上是调用 TagHover 工厂内部函数的视图逻辑。

下面是工厂，TagHover.display 与我们的其他模式一样工作正常，但我试图用 leaveTag > TagHover.off 做的是调用 modal.close。到目前为止没有工作。

我的问题是如何调用 TagHoverController 中的关闭功能，或者 close 在我的 tagsPanel 组件 -> TagsHover Factory 的 \(uibModal 上？ （不使用 \)scope 或 $rootScope 事件）

我不是试图从 TagHover Ctrl 范围内调用 close/cancel close 。

 const TagHover = angular.module('tickertags-shared')
    .controller('TagHoverController', TagHoverController)
    .factory('TagHover', factory);

TagHoverController.$inject = [
    'TagHover'];

function TagHoverController(
    TagHover) {

    this.$onInit = () => {
        console.log('TagHover onInit')
    };

    this.cancel = () => this.$close();
}

factory.$inject = ['$uibModal'];

function factory($uibModal) {

    const display = () => {
        const modal = $uibModal.open({
            controllerAs: 'tghov',
            bindToController:true,
            templateUrl: 'tags/tag_hover.html',
            windowClass: 'dash-modal',
            resolve: {},
            controller: 'TagHoverController'
        });
    };

    const off = () => {
        $uibModal.close({});
    };

    return {
        display,
        off
    }
}

module.exports = TagHover;

这是文档 https://angular-ui.github.io/bootstrap/#/modal

open 方法返回一个模态实例，一个具有以下属性的对象：

close(result) （类型：函数）- 可用于关闭模式，传递结果。

我还注销了 $uibModal 对象，我只看到一个打开的函数，没有关闭:(

原文由 Leon Gaban 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是错误的方法——你不能“只关闭模态”，因为你不知道要关闭哪个模态。我建议你重新设计这个…

你可以看看 $uibModalStack - 它存储打开的模式并有类似 dismisAll 的方法

原文由 Petr Averyanov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在您的情况下，您正在使用 Factory 进行动态模态。所以你可以通过以下两种方式使用 $uibModalStack 。

1. $uibModalStack.dismissAll(); // dismiss all opened modal
2. $uibModalStack.dismiss(openedModal.key); // dismiss modal by key

dismiss 方法的示例。

 var top = $uibModalStack.getTop();
if (top) {
    $uibModalStack.dismiss(top.key);
}

自动态模态以来，在路由器更改期间关闭模态非常重要。

一般来说， $uibModal 将有助于打开模态然后每个模态是 $uibModalInstance ，如果你想在模态内关闭模态。

事件打开模式

angular.module('myPage')
  .controller('PageController', ['$uibModal',
    function($uibModal) {
      function onModalLink() {
        $uibModal.open({
          templateUrl: 'app/modals/paymentTpl.html',
          controller: 'PaymentModalController as vm',
          windowClass: 'generalModal myModal'
        });
      }
    }
  ]);

从实例关闭。

 angular.module('paymentModal')
  .controller('PaymentModalController', [
    '$uibModalInstance',
    function ChangeRepaymentController($uibModalInstance) {
      function onCancel() {
        $uibModalInstance.close(repaymentPercentage);
      }
    }
  ]);

modalInstance - 模态实例。这与使用控制器时发现的 $uibModalInstance 可注入对象相同。

WIKI 参考： https ://github.com/angular-ui/bootstrap/tree/master/src/modal/docs

原文由 Venkat.R 发布，翻译遵循 CC BY-SA 3.0 许可协议