Home > Developer > Web Develop
Getting started with Node. js development-use the dialog box ngDialog, node. jsngdialog
Websites often encounter pop-up dialog box to get user input or pop-up dialog box to let users confirm an operation and so on. There is an extension module based on AngularJS that can help us perform this kind of thing elegantly:NgDialog.
NgDialogA sample webpage is provided on github to demonstrate its usage. Here: https://github.com/likeastore/ngdialog/blob/master/example/index.html. The readme on the github homepage of ngDialog also gives a detailed introduction to commonly used commands and services. For more information, see. This article is purely based on the ngDialog example.
The create dialog box can be ngDialog. open (options) or ngDialog. openConfirm (options ). The former opens a normal dialog box, and you can use options to define a series of attributes, such as a topic and a template. The latter opens a dialog box that rejects escape closure by default and automatically closes after clicking the dialog box. Options is a json object, similar to the following:
{template: 'tplId',closeByEscape: false}Let's take a look at my simple example. Use express generator to create a new application, or directly useGetting started with Node. js development-Keep logging on with cookies. .
Add a self-written fileThe ngdialog.htmland servertpl.html files are stored in the public directory of the project, and ngdialog. js files are stored in the public/javascripts directory.
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 HTML className: 'ngdialog-theme-plain' }); } $scope.openDialogUseText = function(){ ngDialog.open({ template: $scope.template, //use plain text as template 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">
ServerTpl.html content:
<!doctype html>
Introduce ngDialog To use ngDialog, you must use a script in HTML to introduce the corresponding js library file. In addition, several css files must be introduced in the head part. See ngdialog.html.
The ngDialog library file can be used. I renamed the file in version 0.4.0 in the following link. Several renamed files 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 abstract Learning I encountered some questions during my study and recorded them below.
Dialog Box content Template To display a dialog box, you must specify the content to be realistic. This is specified through the template attribute. There are three scenarios for template:
- A plain text template embedded in Javascript or html code. In this case, you must set the plain attribute to true in options, that is, "plain: true ", then a piece of html code is directly assigned to the template, such as template:
<p>Text in ngDialog</p>
- Define a template in HTML, specify an id for the template, and assign the id to the template option, for example, "template: 'templateid '". The template may be like this:
<script type="text/ng-template" id="firstDialogId"><div><p>text in dialog</p></div></script>
- External html fragments (Files) are templates, for example, "template: 'servertpl.html', And the servertpl.html file is on the server.
Topic You can use className to specify a topic in options. Currently, two themes are ngdialog-theme-default and ngdialog-theme-plain. These two notes correspond to two css files. We have introduced them through HTML.
Respond to close events and other events When the dialog box is closed, some events are triggered. developers can listen to these events to receive notifications. Specific events include:
- NgDialog. opened
- NgDialog. closing
- NgDialog. closed
These events are defined in$rootScopeService, so our controller constructor must depend on$rootScope. For example, our current module definition and controller definition:
Angular. module ('myapp', ['ngdialog ']).
Controller ('mycontroller', function ( Scope, RootScope, ngDialog ){
In the module definition, indicate the dependency on the ngDialog module, and inject$rootScopeAnd ngDialog.
For how to listen to events, see the ngdialog. js code.
In addition, you can set preCloseCallback in options to specify a function, which will be called before the function is canceled in the dialog box. Https://github.com/likeastore/ngdialoghere is a description. Note: It will be called when the dialog box is canceled. If confirmed, it will not be adjusted. Therefore, this preCloseCallback is usually used when a user is blocked or reminded to give up the input. For example, if the user registers, enters some information, and wants to return the information, you can ask whether the user really wants to give up.
Specify the controller in the dialog box You can use options to set the controller attribute to specify a controller for a dialog box. This controller can be 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 attribute in options when calling ngDialog. open (options:
$scope.openInsideController = function(){ ngDialog.open({ template: "serverTpl.html", className: "ngdialog-theme-plain", controller: "InsideCtrl" });};
For more information, see https://github.com/likeastore/ngdialog/blob/master/example/index.html.
Confirmation dialog box For example, ask the user to confirm the deletion and ask the user to input. You can use openConfirm (options) to create such a dialog box. NgDialog injects two functions into $ scope: confirm (value) and closeThisDialog (reason) to confirm the closing dialog box and cancel the closing dialog box. Associate them with the confirm and cancel buttons to confirm and cancel the dialog box.
If you want to enter the user name, you can use the ng-model command to bind a variable in the scope to the input, and input the bound variable when you call confirm, in this way, you can get the value entered by the user in confirm for further processing. In our example, the openConfirmDialog button is displayed. After you click it, a dialog box for users to enter a name is displayed. When the user input is complete, click the Confirm button, we can use the value parameter of the confirm method to obtain the value of the user name input box.
Other articles:
- Getting started with Node. js Development -- introducing UIBootstrap
- Getting started with Node. js development-using MongoDB to transform LoginDemo
- Getting started with Node. js development-MongoDB and Mongoose
- Getting started with Node. js development-Keep logging on with cookies
- Get started with Node. js development-use AngularJS built-in services
- Get started with Node. js development-Angular simple example
- Get started with Node. js development-use AngularJS
- Getting started with Node. js Development -- using the jade template engine
- Introduction to Node. js development-routing and middleware in Express
- Getting started with Node. js development-install and use Express
- Node. js development-HTTP File Server
- Getting started with Node. js Development -- HelloWorld Analysis
- Node. js development entry-Environment setup and HelloWorld
Copyright Disclaimer: This article is an original foruok article and cannot be reproduced without the consent of the blogger.
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
