如何使用 Factory 在 mouseleave 上关闭 Angular-ui-bootstrap uibModal? [英] How to close an Angular-ui-bootstrap uibModal on mouseleave using Factory?

问题描述

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

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

以上是在我们的 TagHover Factory 中调用函数的视图逻辑.

下面是工厂，TagHover.display 和我们的其他模态一样工作正常，但我正在尝试用 leaveTag >TagHover.off 就是调用 modal.close.到目前为止还没有工作.

我的问题是如何调用 TagHoverController 中的关闭功能，或者我的 tagsPanel 组件中 $uibModal 上的 close ->标签悬停工厂?(不使用 $scope 或 $rootScope 事件)

我不是在尝试从 TagHover Ctrl 范围内调用 close/cancel，而是尝试从父范围调用 close.

const TagHover = angular.module('tickertags-shared').controller('TagHoverController', TagHoverController).factory('TagHover', 工厂);TagHoverController.$inject = ['标签悬停'];功能 TagHoverController(标签悬停){this.$onInit = () =>{console.log('TagHover onInit')};this.cancel = () =>this.$close();}factory.$inject = ['$uibModal'];函数工厂($uibModal){const 显示 = () =>{const modal = $uibModal.open({控制器为:'tghov'，绑定到控制器:真，templateUrl: 'tags/tag_hover.html',windowClass: 'dash-modal',解决: {}，控制器:'TagHoverController'});};const off = () =>{$uibModal.close({});};返回 {展示，离开}}module.exports = TagHover;

这里是文档

解决方案

这是错误的方法 - 您不能只是关闭模态"，因为您不知道要关闭哪个模态.我建议你重新设计这个...

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

之类的方法

I've recently switched all our modals directives in our app over to Angular-ui-Bootstrap modals. Much better, however running into a new style of modal which closes on mouseleave instead of a cancel click.

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

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

Above is the view logic that calls functions inside of our TagHover Factory.

Below is the Factory, the TagHover.display works fine like with our other modals, but what I'm trying to do with the leaveTag > TagHover.off is call the modal.close. Not working so far.

My question is how do you call the close functionality within the TagHoverController, or close on the $uibModal from my tagsPanel component -> TagsHover Factory? (Without using $scope or $rootScope events)

I'm not trying to call close/cancel from within the TagHover Ctrl scope, but trying to call close from a Parent scope.

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;

Here are the docs 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.

I also logged out the $uibModal object and I only see an open function, no close :(

解决方案

This is wrong approach - you can not "just close modal", cause you dont tell which modal to close. I recommend you to redesign this...

You can have a look at $uibModalStack - it stores opened modals and have methods like dismisAll

这篇关于如何使用 Factory 在 mouseleave 上关闭 Angular-ui-bootstrap uibModal?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！