ngdialog使用心得

在正在做的项目中所有的弹窗都是用ngdialog来实现的，在这里做一下总结：

1、首先在项目目录下使用npm install ng-dialog安装插件

2、将ngDialog.js，ngDialog.css和ngDialog-theme-default.css 引入项目中：

<link rel="stylesheet" href="node_modules/ng-dialog/css/ngDialog.css">
<link rel="stylesheet" href="node_modules/ng-dialog/css/ngDialog-theme-default.css">
<script src="node_modules/ng-dialog/js/ngDialog.js"></script>

3、在控制器中声明：

var APIGateway = angular.module('APIGateway', [
    'apiGatewayCtrls', 'ngDialog'
]); 

var apiGatewayCtrls = angular.module('apiGatewayCtrls', []);
apiGatewayCtrls.controller('StartCtrl', ['$scope', '$http', 'ngDialog',
    function ($scope, $http, ngDialog) {.....}]);

4、按照模版即可使用：

ngDialog.open({
     template: 'debug.html',
     className: 'ngdialog-theme-default',
     controller: function ($scope) {
        $scope.show = function () {
             $scope.closeThisDialog(); //关闭弹窗
        };
        $scope.其他函数 = function () {...}
     }
});

template中引的模版是在html页面中用<script>

标签包裹的，如下：

<script type="text/ng-template" id="debug.html">...</script>

5、其他参数(以下为转载，原文： http://blog.csdn.net/Wonder233/article/details/76152599)

plain {Boolean}

默认为false，如果为true则允许使用纯字符串作为模板。

appendClassName {String}

不同于className属性通过setDefaults（）方法覆盖指定的任何默认类，appendClassName允许在任何默认值之上添加一个类。

ngDialogProvider.setDefaults({
    className: 'ngdialog-theme-default'
});
ngDialog.open({
    template: 'template.html',
    appendClassName: 'ngdialog-custom'
});

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，则在将其值注入到控制器之前解决。

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>
 
 
1
2
3
4

传递给此函数的任何值将附加到该对话框对象上。 对于使用openConfirm（）方法打开的对话框，这个值被用作reject reason。

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;
    }
});
 
 
1
2
3
4
5
6
7
8

在另一个示例中，使用具有嵌套确认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;
    }
});
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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%'
});
 
 
1
2
3
4
5
6
7
8
9
10

height {Number | String}

此选项用来控制对话框的高度。默认值为null（未指定）。

//高度为400px
ngDialog.open({
    template: 'template.html',
    height: 400
});
//自定义百分比高度
ngDialog.open({
    template: 'template.html',
    height: '40%'
});
 
 
1
2
3
4
5
6
7
8
9
10