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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容