ngDialog最佳实践

ngDialog是什么

ngDialog是一款ng1.*的第三方浮窗插件，其正确的使用方法可以说是MVVM思想的浓缩体现。

实现目标

• 提供一个弹窗
• 弹窗提供必要的模板，该模板（HTML结构）可复用
• 对于具体业务逻辑（新增还是修改，在不同的controller中实现）

例子

1. 首先我们定义一个打开操作弹窗的服务，或者在服务中定义一个打开弹窗的方法

//可以用来新增 的弹窗
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;
}

2. 接下来定义新增的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);
    }
}

3. 在需要打开浮窗的控制器中调用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 这里再调用新建对应 对接口 所在的服务，继续后续处理
           
        })
    }
}