ngDialog是什么
ngDialog是一款ng1.*的第三方浮窗插件，其正确的使用方法可以说是MVVM思想的浓缩体现。
实现目标
- 提供一个弹窗
- 弹窗提供必要的模板，该模板（HTML结构）可复用
- 对于具体业务逻辑（新增还是修改，在不同的controller中实现）
例子
- 首先我们定义一个打开操作弹窗的服务，或者在服务中定义一个打开弹窗的方法
//可以用来新增 的弹窗
function addDialog(data) {
var defer=$q.defer();
ngDialog.open({
//模板地址
templateUrl:'xxx.html',
className: 'ngdialog-theme-default',
width: 640,
closeByDocument: false,
showClose: true,
//用来新增的ngDialog的controller
controller: 'AddCtrl',
//传入ngDialog controller的依赖
resolve: {
//依赖名为dep，依赖的对象为传入的参数
dep: function() {
return data;
}
},
/**
* 关闭弹窗前的回调
* 区分是点击关闭按钮 还是保存按钮，返回promise的不同状态
*/
preCloseCallback: function(data) {
if (data==='$closeButton') {
defer.reject();
} else {
defer.resolve(data);
}
}
})
return defer.promise;
}
- 接下来定义新增的dialog的控制器
angular.module('app').controller('AddCtrl',AddCtrl);
AddCtrl.$inject=['$scope','dep','ngDialog'];
function AddCtrl($scope,dep,ngDialog) {
initStatus();
function initStatus() {
/*取到依赖的数据，也就是调用addDialog服务时传入的参数
*浮窗中所有数据与$scope.data下的数据双向绑定
* 所以可以通过传入的初始配置项改变模板中的数据（比如传入title字段 改变弹窗的title）
*/
$scope.data={
params:dep
}
}
/**
* 点击保存设置时触发
* close的传参将传给preCloseCallback，
* preCloseCallback再根据关闭窗口的类型（关闭还是保存）处理
* 当为保存配置时，配置参数作为传参传给promise的resolve状态
*/
$scope.submitForm=function() {
ngDialog.close($scope.ngDialogId,$scope.data.params);
}
}
- 在需要打开浮窗的控制器中调用addDialog服务，传入初始配置项
angular.module('app').controller('PermissionProjectCtrl',PermissionProjectCtrl);
PermissionProjectCtrl.$inject=['$scope','ngDialog','permissionService'];
function PermissionProjectCtrl($scope,ngDialog,permissionService) {
$scope.createNewPermission=function() {
//初始配置项
var params={
title:'新增项目权限',
type:'project'
}
permissionService.addDialog(params).then(function(data) {
//表单处理完成后 传出处理后的数据 data 这里再调用新建对应 对接口 所在的服务，继续后续处理
})
}
}
