如何使用 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 中的关闭功能，或者如何从我的 tagsPanel 组件 -> TagsHover Factory 调用 $uibModal 上的 close？（不使用 $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

The open method returns a modal instance, an object with the following properties:

close(result) (Type: function) - Can be used to close a modal, passing a result.

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

Answer 1

这是错误的方法 - 你不能 "just close modal"，因为你不知道要关闭哪个模式。我建议你重新设计这个...

您可以查看 $uibModalStack - 它存储打开的模态并具有 dismisAll

等方法

Answer 2

在你的例子中，你正在使用工厂来实现动态模态。所以你可以通过以下两种方式使用$uibModalStack。

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

关闭方法示例。

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

It's very important to do dismissing the modal during router changes since its dynamic modal.

一般来说，$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 - The modal instance. This is the same $uibModalInstance injectable found when using controller.

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

Answer 3

我在 AngularJS $uiModal

中使用带 $uibModal 的 close() 方法和 open() 方法进行管理

开启方式

vm.lanzarPopShowTask = lanzarPopShowTask;
function lanzarPopShowTask(index){
    vm.modalInstance = $uibModal.open({
        animation: true,
        ariaLabelledBy: 'modal-title-top',
        ariaDescribedBy: 'modal-body-top',
        templateUrl: '/btask/index/task.html',
        size: 'm',
        controller: function ($scope) {
            vm.task = vm.tasks[index];
            vm.index = index;
        },
        scope: $scope
    });
}

和关闭方法

vm.modalInstance.close();

Answer 4

这样做时，我将模态设置为范围变量，然后使用 $scope.sweetModal.close() 或 $scope.sweetModal.dismiss() 你只需要记住，如果你要执行以下操作，它将不起作用：

$scope.openModal = function () {
    $scope.sweetModal = $uibModal.open({
        templateUrl: '/modals/sweetModal.html',
        size: 'md',
        scope: $scope,
        backdrop: true
    })
        .result.then($scope.modalCloseFunction, $scope.modalDismissFunction);
};

由于变量的设置方式，以下内容将起作用：

$scope.openModal = function () {
    $scope.sweetModal = $uibModal.open({
        templateUrl: '/modals/sweetModal.html',
        size: 'md',
        scope: $scope,
        backdrop: true
    });

    $scope.sweetModal.result.then($scope.modalCloseFunction, $scope.modalDismissFunction);
};

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

How to close an Angular-ui-bootstrap uibModal on mouseleave using Factory?

javascript

angularjs

angular-ui

angularjs-service

angular-ui-bootstrap

关闭方法示例。

事件打开模式

从实例关闭。