Recommended reading: Detailed explanation of AngularJS modal dialog box
$modal is a service that can quickly create modal windows, create part of the pages, controllers, and associate them.
$modal has only one method open(options)
templateUrl: The address of the modal window
template: used to display html tags
scope: Use of content with a modal scope (in fact, $modal will create a subscope of the current scope) by default is $rootScope
controller: The controller specified for $modal, initializes $scope, which can be injected with $modalInstance
resolve: define a member and pass it to the controller specified by $modal. It is equivalent to a reslove property of routes. If you need to pass an object object, you need to use angular.copy()
backdrop: control the background, allowable values: true (default), false (no background), "static" - The background exists, but when clicking outside the modal window, the modal window does not close
keyboard: When Esc is pressed, whether the modal dialog box is closed, default to ture
windowClass: Specify a class and add it to the modal window
The open method returns a modal instance, which has the following properties
close(result): Close the modal window and pass a result
dismiss(reason): undo the modal method and pass a reason
result: A contract that is passed when the modal window is closed or revoked
opened: A contract, a variable passed when the modal window opens and the content is loaded
In addition, $modalInstance extends two methods $close(result), $dismiss(reason), which easily close windows and do not require additional controllers
HTML
<!DOCTYPE html> <html ng-app="ModalDemo"> <head> <title></title> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="lib/angular/angular.min.js"></script> <script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-...min.js"></script> <script src="lib/angular/in/angular-locale_zh-cn.js"></script> </head> <body> <div ng-controller="ModalDemoCtrl"> <script type="text/ng-template" id="myModalContent.html"> <div> <h>I'm a modal!</h> </div> <div> <ul> <li ng-repeat="item in items"> <a ng-click="selected.item = item">{{ item }}</a> </li> </ul> Selected: <b>{{ selected.item }}</b> </div> <div> <button ng-click="ok()">OK</button> <button ng-click="cancel()">Cancel</button> </div> </script> <button ng-click="open()">Open me!</button> </div> <script> var ModalDemo = angular.module('ModalDemo', ['ui.bootstrap']); var ModalDemoCtrl = function ($scope, $modal, $log) { $scope.items = ['item', 'item', 'item']; $scope.open = function () { var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: ModalInstanceCtrl, resolve: { items: function () { return $scope.items; } } }); modalInstance.opened.then(function(){//The function executed after the modal window is opened and console.log('modal is opened'); }); modalInstance.result.then(function (result) { console.log(result); }, function (reason) { console.log(reason);//Click on the blank area, backdrop click will always be output. Click Cancel, and the summer will be canceled $log.info('Modal dismissed at: ' + new Date()); }); }); }; }; var ModalInstanceCtrl = function ($scope, $modalInstance, items) { $scope.items = items; $scope.selected = { item: $scope.items[] }; $scope.ok = function () { $modalInstance.close($scope.selected); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }; </script> </body> </html>The above is the relevant content of AngularJs pop-up mode box (model) introduced to you by the editor. I hope it will be helpful to everyone!