ngDialog中文API

2017-11-17  本文已影响0人  Wonder233

.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值就会被注入。
映射对象如下:

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。通过一个对象,包含:

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的属性。 允许自动关闭以前打开的对话框。

上一篇下一篇

猜你喜欢

热点阅读