js_脚本之家

金沙js8331,做网站平常会遇上弹出对话框获取顾客输入或弹出对话框让客商确认某些操作之类的场地,有一个基于AngularJS的恢宏模块能够帮大家高贵地做到那类事情:ngDialog。

ngDialog在github上提供了三个演示网页,演示了它的各类用法,在这里边:

创办对话框能够是用ngDialog.open或ngDialog.openConfirm。前者展开二个普通的对话框,能够透过options制订诸如宗旨、模板等一体系属性,后面一个张开叁个私下认可推却escape关闭和点击对话框之外自动关闭的对话框。options是json对象,近似下边:

{template: 'tplId',closeByEscape: false}

示范搭建

先看下笔者的简易示例。使用express
generator创设一个新应用,或然间接选用Node.js开垦入门——使用cookie保持登入里的Login德姆o示例。都成。

累计本人写的公文

有四个温馨写的文本,ngdialog.html和serverTpl.html文件放在项指标public目录下,ngdialog.js放在public/javascripts上边。

ngdialog.html内容:

 use ngDialog in AngularJS    Open Default Open Plain theme Open use text Open modal Open use template on server Open Confirm      <div><p>text in dialog</p></div> 

ngdialog.js内容:

angular.module('myApp', ['ngDialog']). controller('myController', function($scope,$rootScope, ngDialog){ $scope.template = 'text in dialogButton'; //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: 'Text in Modal Dialog', 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: 'Please enter your nameUser Name:CancelConfirm', plain: true, className: 'ngdialog-theme-default' }).then{ console.log('confirmed, value - ', value); }, function{ console.log('rejected, reason - ', reason); } ); } //listen events $rootScope.$on('ngDialog.opened', function  { console.log('ngDialog opened: ' + $dialog.attr; $rootScope.$on('ngDialog.closed', function  { console.log('ngDialog closed: ' + $dialog.attr;serverTpl.html内容: A Server Template for ngDialog  Server Template for ngDialog Node.js Express AngularJS MongoDB 

引入ngDialog

要运用ngDialog,须求在HTML中接纳script引进对应的js库文件。此外还要在head部分引入多少个css文件。参谋ngdialog.html就可以。

ngDialog的库文件能够到

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摘要学习

自身学习时境遇了有个别吸引,记录在底下。

对话框内容模板

要展现二个会话框,必须得钦点待现实的剧情。那是透过template属性钦赐的。template有二种景况:

内置在js或html代码里的纯文字模板,那时候亟需同时在options里安装plain属性为true,即“plain:true”,然后径直将一段html代码赋值给template,举例template:

Text in ngDialog

在HTML钦点义template模板,同临时间给模板钦定id,将id赋值给template选项,比方“template:
‘templateId’”。而模板大概是那般的:

以外界的html片段为模板,比如“template:
‘serverTpl.html’”,serverTpl.html文件在服务器上。

点名宗旨

能够在options里经过className钦赐核心,目前有ngdialog-theme-default和ngdialog-theme-plain多个宗旨。那多个注意对应五个css文件,后面大家已经通过HTML引入了。

一呼百诺关闭等事件

对话框被关闭时,会产生一些平地风波,开垦者能够监听那几个事件来赢得通报。具体育赛事件有:

ngDialog.opened ngDialog.closing ngDialog.closed

那些事件定义在$rootScope服务里,所以我们的controller构造函数必得依据$rootScope。比如我们今后的模块定义和controller定义:

angular.module(‘myApp', [‘ngDialog']). controller(‘myController', function(scope,scope,rootScope, ngDialog){

在模块定义里申明信任ngDialog模块,在controller定义里注入了$rootScope和ngDialog。

何以监听事件,看ngdialog.js代码吧。

别的我们还足以在options中装置preCloseCallback,钦命二个函数,那一个函数在对话框裁撤闭馆在此以前会调用到。

钦定对话框的controller

能够通过options设置controller属性来给四个对话框钦点调控器。那么些调整器能够是内联的:

 $scope.openInlineController = function () { $rootScope.theme = 'ngdialog-theme-plain'; ngDialog.open({ template: 'withInlineController', controller: ['$scope', '$timeout', function  { var counter = 0; var timeout; function count() { $scope.exampleExternalData = 'Counter ' + ; timeout = $timeout; } count(); $scope.$on('$destroy', function () { $timeout.cancel; }], className: 'ngdialog-theme-plain' }); };

也得以是在js中定义的。例如大家在js里定义了四个名字为“InsideCtrl”的controller,就足以在调用ngDialog.open时在options里安装controller属性:

$scope.openInsideController = function(){ ngDialog.open({ template: "serverTpl.html", className: "ngdialog-theme-plain", controller: "InsideCtrl" });};

切实示例能够参照:

承认对话框

比方让客商确认删除,让客户输入。使用openConfirm就能够创造那样的对话框。ngDialog向$scope注入了七个函数,一个是confirm,三个是closeThisDialog,分别用来认同关闭对话框,废除闭馆对话框。将它们关联到确认和撤回按键上,就足以料定、撤除对话框。

假定自身要让客商输入顾客名,能够用ng-model指令将功效域内某些变量和input绑定,在调用confirm时传出绑定的变量,那样就足以在confirm中获得客商填写的值来做越发管理。我们的现身说法中的openConfirmDialog开关,点击后就弹出一个让顾客输入名字的对话框,当客商输入完结,点击Confirm按键时,大家得以经过confirm方法的value参数得到客商名输入框的值。

上述正是本文的全部内容,希望对大家的学习抱有助于,也冀望大家多多点拨脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注