AngularJs 打开OA详细Dialog的实现

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

announcement.html

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

[code=plain]<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页面

[code=plain]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);
}

});

}
};
}]);

service.js

[code=plain]Sungoin.service('popupOaContentService',["ngDialog",'$rootScope','RouteHelpers','$ocLazyLoad','$q','$log','APP_REQUIRES', function(ngDialog,$rootScope,helper,$ocLL, $q,$log,appRequires) {
var $body = $('body'),_dialog=null;
function getRequired(name) {
if (appRequires.modules)
for(var m in appRequires.modules)
if(appRequires.modules[m].name && appRequires.modules[m].name === name)
return appRequires.modules[m];
return appRequires.scripts && appRequires.scripts[name];
}
return {
actId:{},
getActId:function () {
return this.actId;
},
prepOpenDialog: function(acid,actype,oclazy,scope) {
var tpl=helper.basepath("oa/"+actype+"/"+actype+"Detail.html");
this.actId=acid;
if(oclazy){
var promise = $q.when(1); // empty promise
promise=promise.then(function() {
var whatToLoad = getRequired(oclazy);
// simple error check
if(!whatToLoad) return $.error('popuContent oclazy: Bad resource actype: [' + actype + '],oclazy:['+oclazy+']');
// finally, return a promise
return $ocLL.load( whatToLoad );
});
}
this.openDialog(tpl,actype,scope);
},
dismiss: function() {
/* $body.removeClass('offsidebar-open')  ;
$rootScope.app.offsidebarTemplate='';*/
},
openDialog:function (tpl,actype,scope) {
this.closeCurrentDialog();
_dialog=ngDialog.open({
template:tpl,
controller:actype+'DetailController',
className: 'ngdialog-theme-default offside-content offside-content-800',
scope: scope,
overlay: false,
closeByDocument: false,
cache: true,
appendTo:'.wrapper'
});
},
closeCurrentDialog:function () {
if(_dialog){
_dialog.close();
_dialog=null;
}
}
};

}]);

config.lazyload.js

[code=plain]// lazyload config
Sungoin.constant('APP_COLORS', {
// Angular based script (use the right module name)
modules: [

{name: 'ngDialog',                  files: ['vendor/ngDialog/js/ngDialog.min.js',
'vendor/ngDialog/css/ngDialog.min.css',
'vendor/ngDialog/css/ngDialog-theme-default.min.css'] },
]
})