如何使用Factory關閉mouseleave上的Angular-ui-bootstrap uibModal？

Question

我最近在我們的應用程序中將所有模態指令切換到Angular-ui-Bootstrap模態。 好多了，但是遇到了一種新的模態，它在mouseleave上關閉而不是取消點擊。

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

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

上面是調用TagHover Factory內部函數的視圖邏輯。

下面是Factory，TagHover.display與我們的其他模態一樣正常，但我正在嘗試使用leaveTag > TagHover.off調用modal.close。 到目前為止沒有工作。

我的問題是你如何調用TagHoverController中的close函數，或者close我的tagsPanel組件中的$ uibModal - > TagsHover Factory？ （不使用$ scope或$ rootScope事件）

我不是試圖在TagHover Ctrl范圍內調用close/cancel ，而是嘗試從Parent范圍調用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）（類型：function） - 可用於關閉模態，傳遞結果。

我還注銷了$uibModal對象，我只看到一個打開的函數，沒有關閉:(

Answer 1

在您的情況下，您正在使用Factory進行動態模態。 所以你可以用以下兩種方式使用$uibModalStack 。

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

解雇方法的示例。

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

Answer 2

這是錯誤的方法 - 你不能“只關閉模態”，因為你不知道要關閉哪個模態。 我建議你重新設計一下......

你可以看看$uibModalStack - 它存儲打開的模態並有像dismisAll這樣的方法

Answer 3

我使用帶有$ uibModal和open（）方法的close（）方法在AngularJS $ uiModal中進行管理

開放方法

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