Exemple détaillé d'utilisation de la boîte modale ngModal dans AngularJS

Cet article présente principalement l'exemple d'utilisation de la boîte modale ngModal dans AngularJS L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et le donner en guise de modèle. référence. Suivons l'éditeur et jetons un coup d'œil.

L'utilisation de boîtes modales dans AngularJS nécessite le référencement de fichiers :

1. angular.js 1.5.5

2. ui.

   bootstrap-tpls.js 0.11.2

3. bootstrap.css 3.3.7

Vous devez faire attention à la cohérence de la version. Les versions supérieures ne prennent pas en charge cette méthode et des erreurs se produiront.

Écrivez le contenu de la boîte modale qui doit apparaître. dans la balise de script, spécifiez les

Attributs, placés dans la page

<script type="text/ng-template" id="modal.html"> 
<p>
  <p class="modal-header">
    <h3 class="modal-title" align="center">
      标题信息
    </h3>
  </p>
  <p class="modal-body">
    <p align="center">
      模态框内容
    </p>
  </p>
  <p class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">
      确认
    </button>
    <button class="btn btn-warning" ng-click="cancel()">
      退出
    </button>
  </p>
</p>
</script>

Injecter les boîtes modales dans l'application et le contrôleur

var app = angular.module('app', ['ui.bootstrap']);
app.controller('modalController', function($scope, $rootScope,$modal) {
  $scope.openModel = function() {
      var modalInstance = $modal.open({
        templateUrl : 'modal.html',//script标签中定义的id
        controller : 'modalCtrl',//modal对应的Controller
        resolve : {
          data : function() {//data作为modal的controller传入的参数
             return data;//用于传递数据
          }
        }
      })
    }
}

//模态框对应的Controller
app.controller('modalCtrl', function($scope, $modalInstance, data) {
  $scope.data= data;

  //在这里处理要进行的操作  
  $scope.ok = function() {
    $modalInstance.close();
  };
  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  }
});

Ajouter un

événement pour déclencher le mode d'affichage Boîte d'état

<button ng-click="openModal()">打开模态框</button>

html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!