angular－－ngDialog最佳实践

发表于

ngDialog是什么

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

实现目标

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

例子

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    //可以用来新增 的弹窗
    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的控制器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    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服务，传入初始配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 这里再调用新建对应 对接口 所在的服务，继续后续处理
           
        })
    }
    
    
}