';
//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: '
',
plain: true,
className: 'ngdialog-theme-default'
}).then(
function(value){
console.log('confirmed, value - ', value);
},
function(reason){
console.log('rejected, reason - ', reason);
}
);
}
//listen events
$rootScope.$on('ngDialog.opened', function (e, $dialog) {
console.log('ngDialog opened: ' + $dialog.attr('id'));
});
$rootScope.$on('ngDialog.closed', function (e, $dialog) {
console.log('ngDialog closed: ' + $dialog.attr('id'));
});
});
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的库文件可以到http://github.com/likeastore/ngDialog下载,或者到这里下载:http://cdnjs.com/libraries/ng-dialog。我是在后面这个链接下的0.4.0版本,把文件重命名了一下。重命名后的几个文件如下:
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,指定一个函数,这个函数在对话框取消关闭之前会调用到。http://github.com/likeastore/ngDialog这里有说明。注意,是取消对话框时会调用到,如果确认,不会调到哦。所以,这个preCloseCallback通常在阻止或提醒用户放弃输入时使用,比如用户注册,输入了一些信息,想退,你可以问他是否要真的想放弃。
指定对话框的controller
可以通过options设置controller属性来给一个对话框指定控制器。这个控制器可以是内联(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'
});
};
也可以是在js中定义的。比如我们在js里定义了一个名为“InsideCtrl”的controller,就可以在调用ngDialog.open(options)时在options里设置controller属性:
$scope.openInsideController = function(){
ngDialog.open({
template: "serverTpl.html",
className: "ngdialog-theme-plain",
controller: "InsideCtrl"
});
};
具体示例可以参考:http://github.com/likeastore/ngDialog/blob/master/example/index.html。
确认对话框
比如让用户确认删除,让用户输入。使用openConfirm(options)就可以创建这样的对话框。ngDialog向$scope注入了两个函数,一个是confirm(value),一个是closeThisDialog(reason),分别用来确认关闭对话框,取消关闭对话框。将它们关联到确认和取消按钮上,就可以确认、取消对话框。
假如我要让用户输入用户名,可以用ng-model指令将作用域内某个变量和input绑定,在调用confirm时传入绑定的变量,这样就可以在confirm中拿到用户填写的值来做进一步处理。我们的示例中的openConfirmDialog按钮,点击后就弹出一个让用户输入名字的对话框,当用户输入完毕,点击Confirm按钮时,我们可以通过confirm方法的value参数获得用户名输入框的值。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。