AngularJs pop-up modal box (model), angularjs Modal

AngularJs pop-up modal box (model), angularjs Modal

Recommended: AngularJS Modal Dialog Box

$ Modal is a service that allows you to quickly create modal windows, create partial pages, controllers, and associate them.

$ Modal has only one open (options) method)

TemplateUrl: Address of the modal window

Template: used to display html tags

Scope: A content with a scope of modal is used (in fact, $ modal creates a subscope of the current scope). The default value is $ rootScope.

Controller: Initialize $ scope for the controller specified by $ modal. The controller can be injected with $ modalInstance.

Resolve: defines a member and passes it to the Controller specified by $ modal, which is equivalent to a reslove attribute of routes. To pass an objec object, you need to use angular. copy ()

Backdrop: controls the background. Valid values: true (default), false (no background), and "static"-the background exists. However, when you click a button outside the modal window, the modal window is not closed.

Keyboard: whether the modal dialog box is closed when Esc is pressed. The default value is true.

WindowClass: specify a class and add it to the modal window.

The open method returns a modal instance with the following attributes:

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: the variable that is passed when the modal window is opened and the content is loaded.

In addition, $ modalInstance extends two methods: $ close (result) and $ dismiss (reason). These methods can easily close the window without additional controllers.

HTML

<! DOCTYPE html> 
The above section describes the relevant content of the AngularJs pop-up modal box (model) introduced by xiaobian. I hope it will help you!
Articles you may be interested in:

 

 
  
Angularjs client compresses image files and uploads instances
 
  
AngularJS + Node. js for online chat rooms
 
  
AngularJS and bootstrap are combined to achieve dynamic loading of pop-up prompt content
 
  
How to Use angularjs and ajax
 
  
Introduction to $ http service usage in AngularJS
 
  
Learn how to use AngularJS File Upload Control
 
  
AngularJS Modal Dialog Box