【AngularJS学习】ngDialog中文API
.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选项。 angular.module('dialog.templates').run(['$templateCache',function($templateCache) {
$templateCache.put('templateId','template content');
}]);
然后可以将dialog.templates模块包含在主模块的依赖项中,并开始使用该模板作为templateId:
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指定的值。 resolve {Object.<String,Function>}(可选)给控制器注入依赖关系映射。 如果这些依赖关系中的任何一个都是promises【这里的promise不知道怎么翻】,ngDialog将等待所有这些依赖关系解决,或者一个被拒绝,然后才能实例化控制器。
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表示任何要存储在控制器对话框范围内的可序列化数据。 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。 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,对话框将被关闭。 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(未指定)。 ariaLabelledBySelector {String}指定对象元素上由aria-labelledby属性引用的元素的CSS选择器。默认值为null(未指定)。 ariaDescribedById {String}指定应用于对话框元素的aria描述的属性的值。默认值为null(未指定)。 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。通过一个对象,包含:
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。 <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的更新版本转换为对话框。 var app = angular.module('exampleApp',['ngDialog']);
app.config(function (ngDialogProvider) {
ngDialogProvider.setForceHtmlReload(true);
});
.setForceBodyReload({Boolean})在每个$ locationChangeSuccess事件上添加额外的侦听器,并将更新版本的body转换为对话框。 var app = angular.module('exampleApp',['ngDialog']);
app.config(function (ngDialogProvider) {
ngDialogProvider.setForceBodyReload(true);
});
.setOpenOnePerName({Boolean})默认值:false var app = angular.module('exampleApp',['ngDialog']);
app.config(function (ngDialogProvider) {
ngDialogProvider.setOpenOnePerName(true);
});
一定要记得在打开对话框时添加“名称”。 如果对话框未打开,ngDialog’open’和’openConfirm’函数将返回undefined。 指令Directive默认情况下,ngDialog模块提供ngDialog指令,可用作按钮,链接等属性。 <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将通过参数参数定义的范围绑定到控制器。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |