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：

• gulp-angular-templatecache
• gulp-ng-html2js
• grunt-html2js
• broccoli-html2js

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