SoFunction
Updated on 2025-04-09

AngularJS using ngModal Modal Box Example

Files that need to be referenced in AngularJS:

  1. 1.5.5
  2. 0.11.2
  3. 3.3.7

It is necessary to note that the version must be consistent. If the higher version does not support this method, an error will occur.

Write the content of the modal box that needs to be popped up in the script tag, specify the attributes, and place them on the page

<script type="text/ng-template" id=""> 
<div>
  <div class="modal-header">
    <h3 class="modal-title" align="center">
      Title information
    </h3>
  </div>
  <div class="modal-body">
    <div align="center">
      Modal box content
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">
      confirm
    </button>
    <button class="btn btn-warning" ng-click="cancel()">
      quit
    </button>
  </div>
</div>
</script>

Inject modal boxes in App and Controller

var app = ('app', ['']);
('modalController', function($scope, $rootScope,$modal) {
  $ = function() {
      var modalInstance = $({
        templateUrl : '',//id defined in script tag        controller : 'modalCtrl',//Modal's corresponding Controller        resolve : {
          data : function() {//Data as the parameter passed in modal's controller             return data;// Used to pass data          }
        }
      })
    }
}

//Controller corresponding to the modal box('modalCtrl', function($scope, $modalInstance, data) {
  $= data;

  // Process the operation to be performed here  $ = function() {
    $();
  };
  $ = function() {
    $('cancel');
  }
});

Add event trigger display modal box

<button ng-click="openModal()">Open the modal box</button>

html

<!DOCTYPE html>
<html ng-app="app" ng-controller="modalController">
<head>
  <title>ng-modelModal Box</title>
</head>
<link href="/bootstrap/3.3.7/css/" rel="external nofollow" rel="stylesheet">
<body>
<button ng-click="openModal()">打开Modal Box</button>

<script type="text/ng-template" id=""> 
  <div>
    <div class="modal-header">
      <h3 class="modal-title" align="center">
        Title information
      </h3>
    </div>
    <div class="modal-body">
      <div align="center">
        Modal Box内容 <br>
        {{data}}
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">
        confirm
      </button>
      <button class="btn btn-warning" ng-click="cancel()">
        quit
      </button>
    </div>
  </div>
</script>

<script src="//1.5.5/"></script>
<script src="/angular-ui-bootstrap/0.11.2/"></script>

<script type="text/javascript">
  var app = ('app', ['']);
  ('modalController', function($scope, $rootScope, $modal) {
    var data = "Data passed through modal";
    $ = function() {
        var modalInstance = $({
          templateUrl : '',//id defined in script tag          controller : 'modalCtrl',//Modal's corresponding Controller          resolve : {
            data : function() {//Data as the parameter passed in modal's controller               return data;// Used to pass data            }
          }
        })
      }
  })
   //Controller corresponding to the modal box   ('modalCtrl', function($scope, $modalInstance, data) {
     $= data;

     // Process the operation to be performed here     $ = function() {
       $();
     };
     $ = function() {
       $('cancel');
     }
  });
</script>
</body>
</html>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.