Appeler une fenêtre modale dans AngularJS Bootstrap UI en utilisant JavaScript

Question

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

Je suis novice en AngularJS et j'ai essayé de chercher dans la documentation ici et ici sans succès.

Merci

Answer 1

OK, donc tout d'abord le http://angular-ui.github.io/bootstrap/ a un <modal> et la directive $dialog et ces deux services peuvent être utilisés pour ouvrir des fenêtres modales.

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

Je ne suis pas sûr de ce que vous voulez dire exactement par "utiliser le code JavaScript" mais en supposant que vous voulez dire n'importe quel endroit dans le code AngularJS où l'option $dialog est probablement la meilleure 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'elle peut être déclenchée par n'importe quel code JavaScript, voici une version qui déclenche la modale avec un timer, 3 secondes après l'instanciation d'un contrôleur :

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

On peut le voir en action dans ce plunk : http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

Enfin, voici la documentation de référence complète de l'application $dialog service décrit ici : https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

Answer 2

Pour faire fonctionner angular ui $modal 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 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 -->

Answer 3

Ouvrir des fenêtres modales en transmettant des données à la boîte de dialogue

Dans le cas où quelqu'un s'intéresse à transmettre des données au 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 <strong><a href="http://plnkr.co/edit/D29YjKGbY63OSa1EeixT?p=preview" rel="nofollow">Plunker</a></strong>

Answer 4

Le site Web AngularJS Bootstrap n'a pas été mis à jour avec la dernière documentation. Il y a environ 3 mois, pkozlowski-opensource a rédigé un changement pour séparer $modal de $dialog, le commit est ci-dessous :

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

Dans ce commit, il a ajouté une nouvelle documentation pour $modal, qui peut être trouvée ci-dessous :

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

J'espère que cela vous aidera !

Answer 5

Version différente, similaire à celle proposée par Maxim Shoustin

J'ai aimé la réponse mais la partie qui m'a dérangé est l'utilisation de <script id="..."> comme un conteneur pour le modèle de la modale.

Je voulais placer le modèle de la modale dans un fichier caché. <div> et lier le html interne avec une variable scope appelée modal_html_template principalement parce que je pense qu'il est plus correct (et plus confortable à traiter dans WebStorm/PyCharm) de placer le html du modèle dans un fichier <div> au lieu de <script id="...">

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

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

consultez l'exemple <a href="http://plnkr.co/edit/gKwKOp8EVUbL0cs4OlST?p=preview" rel="nofollow">plunker</a>

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