AngularJs 打开OA详细Dialog的实现

项目中点击列表打开相应详细页的实现：

announcement.html

• popup-oa-content="popup-oa-content" 指令  点击后打开新页面 该指令定义在directive.js中

  <div class="oa-list oa-tab-body" popup-oa-content="popup-oa-content"> <div ng-repeat="item in announceList"> <div class="show-content" acrow="oaRow" actype="announcement" aid="{{item.id}}"> <div class="show-info"> <span ng-if=showAnnStic(item.isAnnStick) style="color: red;">[置顶]</span> <span>{{item.typeName}}</span> <span> {{item.title}}</span> </div> <div class="show-tool show-info"> <a class="publish-time">{{item.createDate}}</a> <span>{{item.departName}} </span> <span>{{item.createrName}}</span> </div> </div> </div> </div>

directive.js

• 指令中注入了popupOaContentService服务，该服务在service.js中实现

• popupOaContentService.prepOpenDialog 实现打开新dialog页面

  Sungoin.directive('popupOaContent', ["popupOaContentService", function(popupOaContentService) { 'use strict'; return { restrict: 'A', link: function(scope, element, attrs) { var $element=$(element); $element .on('click',"[acrow='oaRow']", function (e) { e.preventDefault(); var aid=$(this).attr("aid"),actype=$(this).attr("actype"),oclazy=$(this).attr("oclazy"); //承诺是否打开 if(angular.isFunction(scope.resolveContent)){ var dismiss=scope.resolveContent(aid); if(dismiss){ popupOaContentService.prepOpenDialog(aid,actype,oclazy,scope); } }else{ popupOaContentService.prepOpenDialog(aid,actype,oclazy,scope); }

  1      });
  2
  3}
  

  }; }]);

service.js

1Sungoin.service('popupOaContentService',["ngDialog",'$rootScope','RouteHelpers','$ocLazyLoad','$q','$log','APP_REQUIRES', function(ngDialog,$rootScope,helper,$ocLL, $q,$log,appRequires) {
2    var $body = $('body'),_dialog=null;
3    function getRequired(name) {
4        if (appRequires.modules)
5            for(var m in appRequires.modules)
6                if(appRequires.modules[m].name && appRequires.modules[m].name === name)
7                    return appRequires.modules[m];
8        return appRequires.scripts && appRequires.scripts[name];
9    }
10    return {
11        actId:{},
12        getActId:function () {
13            return this.actId;
14        },
15        prepOpenDialog: function(acid,actype,oclazy,scope) {
16            var tpl=helper.basepath("oa/"+actype+"/"+actype+"Detail.html");
17            this.actId=acid;
18            if(oclazy){
19                var promise = $q.when(1); // empty promise
20                promise=promise.then(function() {
21                    var whatToLoad = getRequired(oclazy);
22                    // simple error check
23                    if(!whatToLoad) return $.error('popuContent oclazy: Bad resource actype: [' + actype + '],oclazy:['+oclazy+']');
24                    // finally, return a promise
25                    return $ocLL.load( whatToLoad );
26                });
27            }
28            this.openDialog(tpl,actype,scope);
29        },
30        dismiss: function() {
31           /* $body.removeClass('offsidebar-open')  ;
32            $rootScope.app.offsidebarTemplate='';*/
33        },
34        openDialog:function (tpl,actype,scope) {
35            this.closeCurrentDialog();
36            _dialog=ngDialog.open({
37                template:tpl,
38                controller:actype+'DetailController',
39                className: 'ngdialog-theme-default offside-content offside-content-800',
40                scope: scope,
41                overlay: false,
42                closeByDocument: false,
43                cache: true,
44                appendTo:'.wrapper'
45            });
46        },
47        closeCurrentDialog:function () {
48            if(_dialog){
49                _dialog.close();
50                _dialog=null;
51            }
52        }
53    };
54
55}]);

config.lazyload.js

1// lazyload config
2Sungoin.constant('APP_COLORS', {
3  // Angular based script (use the right module name)
4  modules: [
5 
6    {name: 'ngDialog',                  files: ['vendor/ngDialog/js/ngDialog.min.js',
7                                               'vendor/ngDialog/css/ngDialog.min.css',
8                                               'vendor/ngDialog/css/ngDialog-theme-default.min.css'] },
9  ]
10})