Let me tell you that $modal has a method: open, and the properties of this method are introduced:
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 an instance with 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
<!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-0.7.0.min.js"></script><script src="lib/angular/i18n/angular-locale_zh-cn.js"></script></head><body><div ng-controller="ModalDemoCtrl"><script type="text/ng-template" id="myModalContent.html" /><div><h3>I'm a modal!</h3></div><ul><li ng-repeat="item in items"><ang-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 = [ 'item1', 'item2', 'item3' ];$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 the backdrop will always be output after the modal window is opened. click, click Cancel, and the heat will be cancel$log.info('Modal dismissed at: ' + new Date());});});};};var ModalInstanceCtrl = function($scope, $modalInstance, items) {$scope.items = items;$scope.selected = {item : $scope.items[0]};$scope.ok = function() {$modalInstance.close($scope.selected);};$scope.cancel = function() {$modalInstance.dismiss('cancel');};};</script></body></html>The above is the AngularJS $modal pop-up box example code introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!