Home > Developer > Web Develop
Do the site often encounter pop-up dialog to get user input or pop-up dialog to let the user confirm an operation and other scenarios, there is a angularjs-based extension module can help us to complete this kind of things gracefully:ngdialog.
Ngdialog provides a sample web page on GitHub that demonstrates its various uses, here: https://github.com/likeastore/ngDialog/blob/master/example/index.html. Ngdialog's GitHub homepage also provides a more detailed introduction to commonly used directives and services, which can be consulted. My article is purely a reference to Ngdialog's example.
The Create dialog box can be either ngdialog.open (options) or ngdialog.openconfirm (options). The former opens a normal dialog box that allows you to create a series of properties, such as themes, templates, and so on, which opens a default deny escape close and automatically closes the dialog box outside of the Click dialog box. The options are JSON objects, similar to the following:
Example Build{template: ‘tplId‘,closeByEscape: false}
Let's take a look at my simple example. Use Express generator to create a new app, or get started with node. JS Development-Using cookies to keep The Logindemo example in login. are.
Add a file you write yourselfThere are three self-written files, ngdialog.html and servertpl.html files placed under the public directory of the project, Ngdialog.js under Public/javascripts.
Ngdialog.html content:
<!doctype html> Ngdialog.js content:
Angular.module (' myApp ', [' Ngdialog ']). Controller (' Mycontroller ', function ($scope, $rootScope, Ngdialog) {$scope. Template = ' <div><p>text in Dialog</p><p><button type= "button" >Button</button></p><div> "; Different template $scope. OpenDialog = function () {Ngdialog.open ({Template: ' Firstdialogid '}); }; $scope. Openplaindialog = function () {Ngdialog.open ({Template: ' Firstdialogid ',//use template ID defined in H TML className: ' Ngdialog-theme-plain '}); } $scope. Opendialogusetext = function () {Ngdialog.open ({Template: $scope. Template,//use Plain text as tem Plate plain:true, ClassName: ' Ngdialog-theme-plain '}); } $scope. Openmodal = function () {Ngdialog.open ({Template: ' <p>text in Modal dialog</p> ', Plain:true, ClassName: ' Ngdialog-theme-default ', Closebyescape:false, Closebydocument:false }); } $scope. openuseexternaltemplate = function () {Ngdialog.open ({Template: ' servertpl.html ', plain: False, ClassName: ' Ngdialog-theme-default ', Closebyescape:false, closebydocument:false}); }; $rootScope. UserName = "Zhangsan"; $scope. Openconfirmdialog = function () {ngdialog.openconfirm ({Template: ' <div class= "Ngdialog-message" >& Lt;h3>please Enter your name
Servertpl.html content:
<!doctype html>
Introduction of NgdialogTo use Ngdialog, you need to use script in HTML to introduce the corresponding JS library file. There are also several CSS files to be introduced in the head section. Refer to ngdialog.html.
Ngdialog library files can be downloaded to Https://github.com/likeastore/ngDialog, or downloaded here: Http://cdnjs.com/libraries/ng-dialog. I was in the back of this link under the 0.4.0 version, the file was renamed a bit. Several files after renaming are as follows:
- Ngdialog-0.4.0.min.js
- Ngdialog-0.4.0.min.css
- Ngdialog-theme-default-0.4.0.min.css
- Ngdialog-theme-plain-0.4.0.min.css
API Summary LearningI had some doubts when I was studying, and I recorded it below.
dialog box content templateTo display a dialog box, you must specify what you want to be realistic. This is specified through the template property. There are three types of template:
- Embedded in the JS or HTML code text template, at this time need to set the plain property in the options is true, that is, "plain:true", and then directly assign a piece of HTML code to the template, such as Template:
<p>Text in ngDialog</p>
- Define template templates within HTML, assign IDs to templates, assign IDs to template options, such as "Template: ' TemplateID '". And the template might be like this:
<script type="text/ng-template" id="firstDialogId"><div><p>text in dialog</p></div></script>
- Using external HTML fragments (files) as templates, such as "Template: ' servertpl.html '", the servertpl.html file is on the server.
Specify a ThemeThe theme can be specified in the options via classname, and there are currently two themes for Ngdialog-theme-default and Ngdialog-theme-plain. These two notes correspond to two CSS files, which we have introduced through HTML.
Response Shutdown and other eventsWhen the dialog box is closed, some events are emitted and the developer can listen to these events for notification. Specific events are:
- ngdialog.opened
- Ngdialog.closing
- Ngdialog.closed
These events are defined in the$rootScope$rootScope
Angular.module (' myApp ', [' Ngdialog ']).
Controller (' Mycontroller ', function ( c o p e Rootscope, Ngdialog) {
The module definition is marked with a dependent Ngdialog module, which injects and ngdialog in the controller definition $rootScope .
How to listen to events, see Ngdialog.js code it.
In addition, we can also set preclosecallback in the options and specify a function that will be called before the dialog box is canceled. Https://github.com/likeastore/ngDialog here are the instructions. Note that it is called when the dialog box is canceled, and if confirmed, it will not be transferred to OH. So, this preclosecallback usually block or remind the user to discard the input, such as user registration, input some information, want to back, you can ask if he really want to give up.
Specifies the Controller for the dialog boxYou can assign a controller to a dialog box by using the options to set the Controllers property. This controller can be inline (inline):
$scope.openInlineController = function () { $rootScope.theme = ‘ngdialog-theme-plain‘; ngDialog.open({ template: ‘withInlineController‘, controller: [‘$scope‘, ‘$timeout‘, function ($scope, $timeout) { var counter = 0; var timeout; function count() { $scope.exampleExternalData = ‘Counter ‘ + (counter++); timeout = $timeout(count, 450); } count(); $scope.$on(‘$destroy‘, function () { $timeout.cancel(timeout); }); }], className: ‘ngdialog-theme-plain‘ }); };
It can also be defined in JS. For example, if we define a controller named "Insidectrl" in JS, we can set the Controller property in the options when calling Ngdialog.open (options):
$scope.openInsideController = function(){ ngDialog.open({ template: "serverTpl.html", className: "ngdialog-theme-plain", controller: "InsideCtrl" });};
For a specific example, refer to: https://github.com/likeastore/ngDialog/blob/master/example/index.html.
Confirmation dialog boxFor example, let the user confirm the deletion, let the user input. You can create such a dialog box using the Openconfirm (options). Ngdialog injected two functions into $scope, one is confirm (value) and one is closethisdialog (reason), which is used to confirm closing the dialog and cancel closing the dialog box. You can confirm and cancel the dialog box by associating them with the Confirm and Cancel buttons.
If I want to let the user enter the user name, you can use the Ng-model directive to bind a variable and input in the scope, in the call confirm when the bound variable, so you can get the user fill in the Confirm value to do further processing. The Openconfirmdialog button in our example pops up a dialog box that lets the user enter a name, and when the user enters the Confirm button, we can get the value of the User name input box by confirm method's value parameter.
Other articles:
- Introduction to node. JS Development--Introducing Uibootstrap
- Get started with node. JS-Transform Logindemo with MongoDB
- node. JS Development Primer--mongodb and Mongoose
- Get started with node. JS Development-Use cookies to stay signed in
- Getting Started with node. JS-Using ANGULARJS built-in services
- node. JS Development Primer--angular Simple Example
- Introduction to node. JS Development-Using ANGULARJS
- Getting Started with node. JS Development-Using the Jade template engine
- node. JS Development Starter--express Routing and middleware
- node. JS Development Primer--express Installation and use
- node. JS Development Primer--http File Server
- node. JS Development Primer--helloworld Re-analysis
- Introduction to node. JS Development--Environment building and HelloWorld
Copyright NOTICE: This article is Foruok original article, without BO Master permission cannot reprint.
Get started with node. JS Development-Using dialog box Ngdialog
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
