Comment fermer une Angular-ui-bootstrap uibModal sur mouseleave à l'aide de l'Usine?

J'ai récemment changé toutes nos auxiliaires modaux directives dans notre application sur Angular-ui-Bootstrap auxiliaires modaux. Beaucoup mieux, mais en cours d'exécution dans un nouveau style de modal qui se referme sur mouseleave au lieu de cliquez sur annuler.

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

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

Ci-dessus est la logique de la vue qui appelle des fonctions à l'intérieur de notre TagHover Usine.

Ci-dessous est l'Usine, le TagHover.l'affichage fonctionne très bien comme avec nos autres auxiliaires modaux, mais ce que j'essaie de faire avec le leaveTag > TagHover.off est appel modal.de près. Ne fonctionne pas si loin.

Ma question est comment appelez-vous les fermez la fonctionnalité au sein de la TagHoverController, ou close sur l' $uibModal de mon tagsPanel composant -> TagsHover Usine? (Sans l'aide de $portée ou $rootScope événements)

Je ne suis pas en train d'appeler close/cancel de l'intérieur de la TagHover Ctrl portée, mais en essayant d'appeler close d'un Parent.

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;

Comment fermer une Angular-ui-bootstrap uibModal sur mouseleave à l'aide de l'Usine?

Voici les docs https://angular-ui.github.io/bootstrap/#/modal

La méthode ouverte retourne un modal exemple, un objet avec les propriétés suivantes:

proche(suite) (Type: fonction: Peut être utilisé pour fermer la modale, en passant d'un résultat.

J'ai aussi déconnecté de la $uibModal objet et je ne vois qu'une fonction d'ouverture, pas de fermeture 🙁

Comment fermer une Angular-ui-bootstrap uibModal sur mouseleave à l'aide de l'Usine?

Utiliser $uibModalInstance.close() au lieu de $uibModal.close()
Hmm, j'ai juste essayé... j'ai injecté $uibModalInstance, mais il a obtenu Inconnu fournisseur de 🙁

OriginalL'auteur Leon Gaban | 2016-12-26

5

C'est une mauvaise approche - tu ne peux pas "juste fermer la modale", cause vous n'avez pas de dire qui modal pour fermer. Je vous recommande de repenser cette...

Vous pouvez avoir un coup d'oeil à $uibModalStack - il des magasins ouverts les auxiliaires modaux et qui ont des méthodes comme dismisAll

Nice! C'est le travail, je ne vois pas de documentaion sur $uibModalStack bien, avez-vous un lien?
Cela pourrait être la solution, j'ai trouvé plus d'infos ici:stackoverflow.com/questions/25445949/...
Il a travaillé! $uibModalStack.dismissAll();

OriginalL'auteur Petr Averyanov
7

Dans votre cas, vous êtes à l'aide de l'Usine pour la dynamique Modale. ainsi, vous pouvez utiliser $uibModalStack dans le dessous de deux façons.
1. $uibModalStack.dismissAll(); //dismiss all opened modal
2. $uibModalStack.dismiss(openedModal.key); //dismiss modal by key
Exemple de rejeter la Méthode.
```
var top = $uibModalStack.getTop();
if (top) {
    $uibModalStack.dismiss(top.key);
}
```
Il est très important de ne rejetant le modal lors de changement de routeur depuis sa dynamique modale.

En général, $uibModal aidera à ouvrir la modale de chaque modal est $uibModalInstance, si vous voulez fermer la modale à l'intérieur de l'modal.

Ouverture Modal sur l'Événement
```
angular.module('myPage')
  .controller('PageController', ['$uibModal',
    function($uibModal) {
      function onModalLink() {
        $uibModal.open({
          templateUrl: 'app/modals/paymentTpl.html',
          controller: 'PaymentModalController as vm',
          windowClass: 'generalModal myModal'
        });
      }
    }
  ]);
```
À Proximité de l'Instance.
```
angular.module('paymentModal')
  .controller('PaymentModalController', [
    '$uibModalInstance',
    function ChangeRepaymentController($uibModalInstance) {
      function onCancel() {
        $uibModalInstance.close(repaymentPercentage);
      }
    }
  ]);
```
modalInstance - Modale de l'instance. C'est le même $uibModalInstance injectable lors de l'utilisation d'un contrôleur.

WIKI de Référence: https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs

Merci, mais je ne cherche pas à fermer la Modale, mais à partir de l'Usine que de le configurer. Je peux juste appeler cette.annuler si je suis dans la Modale du champ d'application.
gotcha. vous avez besoin d'utiliser $uibModalStack depuis sa usine avec des exemples détaillés
En fait j'ai besoin de revoir ce moment... je dois être en mesure de cibler le modal particulier qui a été ouvert, pas tous les auxiliaires modaux. Dans votre exemple, où est repaymentPercentage en venir?
Pourriez-vous poster un exemple de code à l'aide de mon function factory($uibModal) exemple ci-dessus? J'essaie de comprendre comment mettre en modal de la clé ainsi que d'appeler une chose par openedModal.key
Ajout de l'exemple pour $uibModalStack.dismiss

OriginalL'auteur Venkat.R

- Je utiliser la méthode close() avec $uibModal et de la méthode open() pour gérer en AngularJS $uiModal

Méthode ouverte

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

Et Fermer la méthode

vm.modalInstance.close();

OriginalL'auteur Samuel Ivan

Quand vous faites cela, j'ai défini la modale comme une étendue variable, puis utilisez $scope.sweetModal.close() ou $scope.sweetModal.dismiss() vous avez juste à vous rappeler que si vous décidez de faire ce qui suit, il ne fonctionnerait pas:

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

Où que la suivante serait de travailler en raison de la façon dont la variable est définie:

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

OriginalL'auteur B3none

Vous devez vous connecter pour publier un commentaire.

Exemple de rejeter la Méthode.

Ouverture Modal sur l'Événement

À Proximité de l'Instance.