AngularJS - Fermeture De Fenêtre Modale

Mon comprend:

bootstrap.css [ getbootstrap.com/2.3.2 ]
angular/ui-bootstrap-tpls-0.10.0.min.js from: [ angular-ui.github.io/bootstrap ]

Je suis en utilisant AngularJS et Twitter Bootstrap.

De AngularJS j'ai ouvert la fenêtre modale comme suit:

var modalInstance = $modal.open({
              templateUrl: 'resources/html/mymodal.html',
              controller: 'mymodalController',
              scope: $scope
            });

Mon Modale du Modèle est:

<div class="modal">
<
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
  </div>
.....
</div>


Question:

La proximité bouton [x] n'est pas de travail

Quand je clique dessus, le modal ne va pas loin. Mais quand j'appuie sur Esc - modale s'évanouit.

Ressemble tellement ... data-dismiss="modal" ne fonctionne pas. Des idées?

  • Je suis en supposant que vous utilisez angulaire de l'interface utilisateur l'INTERFACE utilisateur de Bootstrap pour ouvrir le modal
  • JeremyWeir: note de Pls...j'ai ajouté le comprend(css/js) à la Question.
  • Dois-je mal combinaison de comprend? Je suis un peu perdu entre twitter bootstrap (css/js) et angulaire bootstrap (css/js).
  • vous devez ajouter ng-click à votre X bouton.une ng-click appeler une fonction de clôture de modal.
  • Je voudrais encourager la mise à niveau vers Bootstrap v3 si possible.
InformationsquelleAutor Jasper | 2014-10-02
  1. 12

    la data-dismiss attribut est utilisé par le bootstrap, javascript (comme je vois que tu as le code source html de, http://getbootstrap.com/javascript/#modals )

    UI Bootstrap ne sera pas contraignant pour que le bouton fermer parce qu'il n'est pas à la recherche de cet attribut, vous devez ajouter une ng-cliquez sur et fermer la modale comme dans les exemples

    http://angular-ui.github.io/bootstrap/#/modal

    dans le contrôleur:

    $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

    Modale du modèle...

    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    • J'ai inclus: bootstrap.css [ getbootstrap.com/2.3.2 ], et j'ai angular/ui-bootstrap-tpls-0.10.0.min.js à partir de: [ angular-ui.github.io/bootstrap ] , est-ce une combinaison erronée? de quoi ai-je besoin d'obtenir des données-rejeter de travail?
    • Vous ne voulez pas inclure la bootstrap.js si vous utilisez angular-ui bootstrap lib. Utiliser le ng-cliquez sur gestionnaire pour fermer la boîte de dialogue comme dans l'exemple.
    InformationsquelleAutor JeremyWeir
  2. 3

    Angulaire, il y a un close méthode de $modalInstance pour fermer une ouverture de fenêtre modale .

    Contrôleur :

      $scope.closeMyPopup = function () {
    $modalInstance.close();
  };
    InformationsquelleAutor Rubi saini
  3. -4

    Je l'ai fait de cette façon en utilisant jQuery Angulaire:

    jQuery('#YOURMODALID').modal('hide');
    • Vous ne devriez pas avoir besoin d'utiliser jQuery Angulaire pour cela. Pas de meilleure pratique. Voir la accepté de répondre.
    • JQuery Angulaire? Vous êtes mélanger les métaphores.
    InformationsquelleAutor adal