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
Service, so our controller constructor must rely on the$rootScope
。 For example, our current module definition and controller definition:
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