web-dev-qa-db-fra.com

Invocation de la fenêtre modale dans AngularJS Bootstrap UI en utilisant JavaScript

En utilisant l'exemple mentionné ici , comment puis-je appeler la fenêtre modale en utilisant JavaScript au lieu de cliquer sur un bouton?

Je suis nouveau sur AngularJS et j'ai essayé de chercher dans la documentation ici et ici sans chance.

Merci

angularjsmodal-dialogangular-ui-bootstrap
73
Ahmad Alfy

OK, donc tout d’abord le http://angular-ui.github.io/bootstrap/ a une directive <modal> et le service $dialog et ces deux éléments peuvent être utilisé pour ouvrir des fenêtres modales.

La différence est que, avec la directive <modal>, le contenu d'un modal est incorporé dans un modèle d'hébergement (celui qui déclenche l'ouverture de la fenêtre modale). Le service $dialog est beaucoup plus flexible et vous permet de charger le contenu de modal à partir d'un fichier séparé, ainsi que de déclencher des fenêtres modales à partir de n'importe quel endroit du code AngularJS (contrôleur, service ou autre directive).

Vous ne savez pas exactement ce que vous entendez par "utiliser du code JavaScript", mais le service $dialog est probablement une solution.

Il est très facile à utiliser et dans sa forme la plus simple, vous pouvez simplement écrire:

$dialog.dialog({}).open('modalContent.html');

Pour illustrer le fait qu’il peut être réellement déclenché par n’importe quel code JavaScript, voici une version qui déclenche le modal avec une minuterie, 3 secondes après l’instanciation d’un contrôleur:

function DialogDemoCtrl($scope, $timeout, $dialog){
  $timeout(function(){
    $dialog.dialog({}).open('modalContent.html');  
  }, 3000);  
}

Ceci peut être vu en action dans ce dossier: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

Enfin, voici la documentation de référence complète sur le service $dialog décrit ci-dessous: https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md =

75
pkozlowski.opensource

Pour que angular ui $ modal fonctionne avec bootstrap 3, vous devez écraser les styles.

.modal {
    display: block;
}
.modal-body:before,
.modal-body:after {
    display: table;
    content: " ";
}
.modal-header:before,
.modal-header:after {
    display: table;
    content: " ";
}

(Les derniers sont nécessaires si vous utilisez des directives personnalisées) et encapsulez le code HTML avec

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
29
Hawk

Ouvrir des fenêtres modales avec la transmission de données à une boîte de dialogue

Si quelqu'un souhaite passer des données à la boîte de dialogue:

app.controller('ModalCtrl', function($scope,  $modal) {

      $scope.name = 'theNameHasBeenPassed';

      $scope.showModal = function() {

        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };


        $scope.opts.resolve.item = function() {
            return angular.copy(
                                {name: $scope.name}
                          ); // pass name to resolve storage
        }

          var modalInstance = $modal.open($scope.opts);

          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {

     $scope.item = item;

      $scope.ok = function () {
        $modalInstance.close();
      };

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

Démo Plunker

27
Maxim Shoustin

Manière rapide et sale!

Ce n'est pas un bon moyen, mais pour moi, cela semble le plus simple.

Ajoutez une balise d'ancrage contenant la cible de données modale et la bascule de données, à laquelle un identificateur est associé. (Peut être ajouté presque n'importe où dans la vue html)

<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>

Maintenant,

À l'intérieur du contrôleur angular, à partir duquel vous souhaitez déclencher le modal, utilisez simplement

angular.element('#myModalShower').trigger('click');

Cela imitera un clic sur le bouton basé sur le code angular et le modal apparaîtra.

17
Gagandeep Singh

Le site Web AngularJS Bootstrap n'a pas été mis à jour avec la documentation la plus récente. Il y a environ 3 mois pkozlowski-opensource a créé une modification permettant de séparer $ modal de $ dialog commit en-dessous:

https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd

Dans cette commande, il a ajouté une nouvelle documentation pour $ modal, que vous pouvez trouver ci-dessous:

https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a04615350a59be1588dbdd86bd/src/modal/docs/readme.md .

J'espère que cela t'aides!

17
Craig Ruks

Version différente semblable à celle proposée par Maxim Shoustin

J'ai aimé la réponse mais la partie qui m'a dérangé était l'utilisation de <script id="..."> en tant que conteneur pour le modèle du modal.

Je voulais placer le modèle du modal dans un <div> masqué et lier le code HTML interne à une variable de domaine appelée modal_html_template principalement parce que je le trouve plus correct (et plus confortable à traiter dans WebStorm/PyCharm) pour le placer. le code HTML du modèle dans un <div> au lieu de <script id="...">

cette variable sera utilisée lors de l'appel de $modal({... 'template': $scope.modal_html_template, ...})

afin de lier le html interne, j'ai créé inner-html-bind qui est une directive simple

consultez l'exemple  plunker

<div ng-controller="ModalDemoCtrl">

    <div inner-html-bind inner-html="modal_html_template" class="hidden">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </div>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

inner-html-bind directive:

app.directive('innerHtmlBind', function() {
  return {
    restrict: 'A',
    scope: {
      inner_html: '=innerHtml'
    },
    link: function(scope, element, attrs) {
      scope.inner_html = element.html();
    }
  }
});
4
Jossef Harush