Detailed example of how to use ngModal modal box in AngularJS

This article mainly introduces the example of using ngModal modal box in AngularJS. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

Using modal boxes in AngularJS requires referencing files:

1. angular.js 1.5.5

2. ui.bootstrap-tpls.js 0.11.2

3. bootstrap.css 3.3.7

It should be noted that the versions must be consistent. Higher versions do not support this method and an error will occur.

Write the content of the modal box that needs to pop up in the script tag and indicate Attribute, put it in the 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>

Inject modal box in App and Controller

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

AddEventTrigger display of modal box

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

html

  



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

The above is the detailed content of Detailed example of how to use ngModal modal box in AngularJS. For more information, please follow other related articles on the PHP Chinese website!