.open(options)
打开对话窗口,在每次调用时创建新的对话框实例。接受对象作为唯一的参数。
参数选项Options:
template {String}
对话框模板可以通过所给路径加载外部html模板或type="text/ng-template"的script标签。
<script type="text/ng-template" id="templateId">
<h1>Template heading</h1>
<p>Content goes here</p>
</script>
ngDialog.open({ template: 'templateId' });
当然,还可以使用简单的字符串作为模板和plain选项。
tips:
并不一定要将外部html模板放在script标签中。可以将模板放在
$templateCache中:
angular.module('dialog.templates').run(['$templateCache', function($templateCache) {
$templateCache.put('templateId', 'template content');
}]);
然后可以将dialog.templates模块包含在主模块的依赖项中,并开始使用该模板作为templateId:
无需手动执行这些操作,可以使用插件。 它们可用于不同的构建系统,包括最受欢迎的Gulp / Grunt:
plain {Boolean}
默认为false,如果为true则允许使用纯字符串作为模板。
ngDialog.open({
template: '<p>my template</p>',
plain: true
});
controller {String} | {Array} | {Object}
controller是对话窗口的控制器。 控制器可以通过名称引用或直接内联来指定。
ngDialog.open({
template: 'externalTemplate.html',
controller: 'SomeController'
});
//或者
ngDialog.open({
template: 'externalTemplate.html',
controller: ['$scope', 'otherService', function($scope,
otherService) {
// controller logic
}]
});
controllerAs {String}
可以选择为控制器指定controllerAs参数。 然后在你的模板里面,可以把这个控制器引用给controllerAs指定的值。
AngularJS团队目前推荐使用controllerAs语法。
resolve {Object.<String, Function>}
(可选)给控制器注入依赖关系映射。 如果这些依赖关系中的任何一个都是promises【这里的promise不知道怎么翻】,ngDialog将等待所有这些依赖关系解决,或者一个被拒绝,然后才能实例化控制器。
如果所有的promises都成功解决了,解决的promises值就会被注入。
映射对象如下:
- key – {String}: 要注入控制器的依赖项的名称。
- factory - {String | Function}:如果是String类型,那么它是一个服务的别名。如果是Function,那么它将使用$ injector.invoke进行注入,返回依赖关系。如果返回的是一个promises,则在将其值注入到控制器之前解决。
ngDialog.open({
controller: function Ctrl(dep) {/*...*/},
resolve: {
dep: function depFactory() {
return 'dep value';
}
}
});
scope {Object}
将scope对象传递给对话框。如果使用具有单独的$scope服务的控制器,则此对象将被传递到$scope.$parent:
$scope.value = true;
ngDialog.open({
template: 'externalTemplate.html',
className: 'ngdialog-theme-plain',
scope: $scope
});
<script type="text/ng-template" id="externalTemplate.html">
<p>External scope: <code>{{value}}</code></p>
</script>
scope.closeThisDialog(value)
.closeThisDialog(value)方法被注入到传递的$ scope中。这可以直接关闭弹出的对话框,例如:
<div class="dialog-contents">
<input type="text"/>
<input type="button" value="OK" ng-click="checkInput() && closeThisDialog('Some value')"/>
</div>
传递给此函数的任何值将附加到该对话框对象上。 对于使用openConfirm()方法打开的对话框,这个值被用作reject reason。
data {String | Object | Array}
data表示任何要存储在控制器对话框范围内的可序列化数据。
($scope.ngDialogData)。 从版本0.3.6 $scope.ngDialogData保持对对象的引用,而不是复制它们。
className {String}
此选项用于控制对话框的外观,可以使用内置主题或创建自己的样式模式。
ngDialog.open({
template: 'templateId',
className: 'ngdialog-theme-default'
});
注意:如果没有提到className,对话框将无法正确显示。
appendClassName {String}
不同于className属性通过setDefaults()方法覆盖指定的任何默认类,appendClassName允许在任何默认值之上添加一个类。
ngDialogProvider.setDefaults({
className: 'ngdialog-theme-default'
});
ngDialog.open({
template: 'template.html',
appendClassName: 'ngdialog-custom'
});
disableAnimation {Boolean}
如果为true,则对话框的动画将被禁用,默认为false。
overlay {Boolean}
如果为false,则在dialog框中隐藏重叠div,默认为true。
showClose {Boolean}
如果为false,则隐藏dialog框关闭按钮,默认为true。
closeByEscape {Boolean}
通过单击Esc键关闭对话框,默认为true。
如果同时打开几个对话框,单击Esc键将关闭所有打开的对话框。
closeByNavigation {Boolean}
关闭对话框的状态变更(history.back,$ state.go等),默认为false。 兼容ui-router和angular-router。如果需要在返回或更改状态时关闭对话框,应该将此值设置为true。 如果需要在应用中更改状态时,对话框保持打开状态,应该将此值设置为false。
如果同时打开其中的几个,状态变更将关闭所有打开的对话框。
closeByDocument {Boolean}
通过点击覆盖背景关闭对话框,默认为true。
appendTo {String}
指定元素添加到对话框实例上,接受字符串选择器(例如#yourId,.yourClass)。 如果没有指定则默认将body添加到对话框。
cache {Boolean}
如果为false则禁用dialog缓存。 默认为true,用于开发目的。
name {String} | {Number}
给出一个对话框实例的名称。 如果打开了多个对话框,则识别特定对话框很有用。
onOpenCallback {String} | {Function}
在打开对话框后提供要调用的函数或函数的名称。可以使用此回调代替ngdialog.opened事件。当对话框附加到DOM并将要向用户显示时提供了一种注册hook的方法。
preCloseCallback {String} | {Function}
在关闭对话框之前提供要调用的函数或函数的名称。如果该选项中指定的回调函数返回false,则对话框将不会关闭。或者,如果回调函数返回一个解决的promise,对话框将被关闭。
preCloseCallback函数接收作为与.close(id,value)相同的参数值。
主要功能是能够弹出对话框。包含用户操作(例如编辑数据),能够在退出对话框时(例如通过转义键)确认是否丢弃未保存的更改。
此示例在preCloseCallback函数中使用带有window.confirm调用的内联函数:
ngDialog.open({
preCloseCallback: function(value) {
if (confirm('Are you sure you want to close without saving your changes?')) {
return true;
}
return false;
}
});
在另一个示例中,使用具有嵌套确认ngDialog的回调函数:
ngDialog.open({
preCloseCallback: function(value) {
var nestedConfirmDialog = ngDialog.openConfirm({
template:'\
<p>Are you sure you want to close the parent dialog?</p>\
<div class="ngdialog-buttons">\
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog(0)">No</button>\
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(1)">Yes</button>\
</div>',
plain: true
});
// NOTE: return the promise from openConfirm
return nestedConfirmDialog;
}
});
trapFocus {Boolean}
如果为true,则可确保聚焦的元素保持在对话框内以符合可访问性建议。 默认值为true。
preserveFocus {Boolean}
如果为true,则关闭对话框后将焦点恢复到启动它的元素上。旨在改善键盘辅助功能。默认为true。
ariaAuto {Boolean}
如果为true,则自动为任何未指定的辅助功能属性选择适当的值。默认为true。
ariaRole {String}
指定应用于对话框元素的角色属性的值。默认值为null(未指定)。
ariaLabelledById {String}
指定应用于对话框元素的aria-labelledby属性的值。默认值为null(未指定)。
如果指定,则该值不会针对DOM进行验证。
ariaLabelledBySelector {String}
指定对象元素上由aria-labelledby属性引用的元素的CSS选择器。默认值为null(未指定)。
如果指定,则使用第一个匹配元素。
ariaDescribedById {String}
指定应用于对话框元素的aria描述的属性的值。默认值为null(未指定)。
如果指定,则该值不会针对DOM进行验证。
ariaDescribedBySelector {String}
指定对象元素上由aria描述的属性引用的元素的CSS选择器。默认值为null(未指定)。
如果指定,则使用第一个匹配元素。
width {Number | String}
此选项用来控制对话框的宽度。默认值为null(未指定)。
//宽度为400px
ngDialog.open({
template: 'template.html',
width: 400
});
//自定义百分比宽度
ngDialog.open({
template: 'template.html',
width: '40%'
});
height {Number | String}
此选项用来控制对话框的高度。默认值为null(未指定)。
//高度为400px
ngDialog.open({
template: 'template.html',
height: 400
});
//自定义百分比高度
ngDialog.open({
template: 'template.html',
height: '40%'
});
返回值Returns:
open()方法返回一个具有一些有用属性的对象。
id {String}
这是刚刚创建的对话框的ID。 它是对话框的DOM元素上的ID。
close(value) {Function}
这是一个函数,它将关闭当前调用open()打开的对话框。 它需要一个可选的值来传递给接近的promise。
closePromise {Promise}
当对话框关闭时,将会解决promise。通过一个对象,包含:
- id-关闭对话框的ID
- value-关闭的对话框的值
- $dialog-此时已从DOM中删除的对话框元素
- remainingDialogs-其余的对话框仍然打开
如果对话框被其中一个内置机制('$escape', '$closeButton' 或者 '$document'.)关闭,value属性将是一个特殊的字符串。
var dialog = ngDialog.open({
template: 'templateId'
});
dialog.closePromise.then(function (data) {
console.log(data.id + ' has been dismissed.');
});
.setDefaults(options)
通过ngDialogProvider设置默认设置:
var app = angular.module('myApp', ['ngDialog']);
app.config(['ngDialogProvider', function (ngDialogProvider) {
ngDialogProvider.setDefaults({
className: 'ngdialog-theme-default',
plain: true,
showClose: true,
closeByDocument: true,
closeByEscape: true
});
}]);
.openConfirm(options)
打开一个对话框,默认情况下,在对话窗口中点击转义或点击时,该对话框不会关闭。该函数返回根据对话框关闭方式解析或拒绝的promise。
参数选项Options:
这个方法的参数选项与.open()方法相同,并添加了一个额外的函数:
scope.confirm()
方法.confirm()也被注入到传递的$ scope中。使用此方法关闭对话框并解决打开模态时返回的promise。
该函数接受一个可选参数,该参数用作解析的promise的值。
<div class="dialog-contents">
Some message
<button ng-click="closeThisDialog()">Cancel</button>
<button ng-click="confirm()">Confirm</button>
</div>
返回值Returns:
如果使用.confirm()函数来关闭对话框可以解决的Angular promise对象,否则promise被拒绝。解析值和拒绝原因由传递给confirm()或closeThisDialog()调用的值定义。
.isOpen(id)
方法接受对话框的id,并返回一个布尔值,指示指定的对话框是否打开。
.close(id, value)
方法接受对话框的id作为字符串参数来关闭特定的对话窗口,如果没有指定id,它将关闭所有当前活动的模式(与.closeAll()相同的行为)。使用(或所有对话框promise)解决对话框promise的可选值。
.closeAll(value)
方法管理关闭页面上的所有活动模式。 使用可选值来解决所有的对话框promise。
.getOpenDialogs()
返回包含打开的对话框的ID的数组。
.setForceHtmlReload({Boolean})
在每个$ locationChangeSuccess事件上添加一个附加侦听器,并将html的更新版本转换为对话框。
在某些罕见的情况下,当应用依赖于DOM更改时,可能会有用,默认为false。
在ngDialogProvider中配置:
var app = angular.module('exampleApp', ['ngDialog']);
app.config(function (ngDialogProvider) {
ngDialogProvider.setForceHtmlReload(true);
});
.setForceBodyReload({Boolean})
在每个$ locationChangeSuccess事件上添加额外的侦听器,并将更新版本的body转换为对话框。
在某些罕见的情况下,当应用依赖于DOM更改时,可能会有用,默认为false。
在ngDialogProvider中配置:
var app = angular.module('exampleApp', ['ngDialog']);
app.config(function (ngDialogProvider) {
ngDialogProvider.setForceBodyReload(true);
});
.setOpenOnePerName({Boolean})
默认值:false
定义是否同时打开同名的对话框多次。 分配true可以防止打开第二个对话框。
在ngDialogProvider中配置:
var app = angular.module('exampleApp', ['ngDialog']);
app.config(function (ngDialogProvider) {
ngDialogProvider.setOpenOnePerName(true);
});
一定要记得在打开对话框时添加“名称”。 如果对话框未打开,ngDialog'open'和'openConfirm'函数将返回undefined。
指令Directive
默认情况下,ngDialog模块提供ngDialog指令,可用作按钮,链接等属性。
几乎所有.open()选项也可以通过标签属性使用,唯一的区别是需要ng-template id或模板文件的路径。
例如:
<button type="button"
ng-dialog="templateId.html"
ng-dialog-class="ngdialog-theme-flat"
ng-dialog-controller="ModalCtrl"
ng-dialog-close-previous>
Open modal text
</button>
可以选择使用ng-dialog-bind-to-controller将通过参数参数定义的范围绑定到控制器。
有关bindToController的更多信息点击此处。
指令包含另外一个但非常有用的选项,它是一个名为ng-dialog-close-previous的属性。 允许自动关闭以前打开的对话框。