Next to everyone said $modal has a method: Open, the properties of the method description:
Templateurl: Address of modal window
Template: for displaying HTML tags
Scope: A scope is used for modal content (in fact, $modal creates a child scope for the current scope) defaults to $rootscope
Controller: Initializes the $scope for the controller specified for $modal, which can be injected with $modalinstance
Resolve: Define a member and pass him to the controller specified by $modal, which is equivalent to a reslove attribute of routes, and if you need to pass a Objec object, you need to use Angular.copy ()
Backdrop: Control background, allowed values: True (default), False (no background), "static"-the background is present, but the modal window does not close when you click outside the modal window
Keyboard: When ESC is pressed, the modal dialog box is closed and the default is Ture
Windowclass: Specifies a class and is added to the modal window
The Open method returns an instance that has the following properties:
Close (results): Closes the modal window and passes a result
Dismiss (reason): Undo modal method and pass a reason
Result: A contract that is passed when the modal window is closed or revoked
Opened: A contract that is passed when the modal window is opened and the content is loaded
In addition, the $modalInstance extends two method $close (result), $dismiss (reason), which easily closes the window and does not require an additional controller
<! 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" class= modal-header " > <h3>i ' m a modal!</h3> </div> <div class= "Modal-body" > <ul> <li ng-repeat= "item in I TEMs "><a ng-click=" Selected.item = Item >{{Item}}</a></li> </ul> selected: <b>{{ Selected.item}}</b> </div> <div class= "Modal-footer" > <button class= "btn btn-primary" ng-click= " Ok () ">OK</button> <button class=" btn btn-warning "ng-click=" Cancel () "> cancel</button> </div> </script> <button class= "btn" ng-click= "open ()" >open
> </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: {ite
Ms:function () {return $scope. Items;}}
});
ModalInstance.opened.then (function () {//modal window is executed after Console.log (' modal is opened '); ModalInstance.result.then (function (Result) {Console.log (result);}, function (reason) {console.log (reason);/click on a blank area
, the total output backdrop//Click, click Cancel, then the summer will 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 a small set to introduce the angularjs $modal pop-up box instance code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
