Angularjs编写KindEditor,UEidtor,jQuery指令
目前angularJS非常火热，本人也在项目中逐渐使用该技术，在angularJS中，指令可以说是当中非常重要的一部分，这里分享一些自己编写的指令：
注：本人项目中用了oclazyload进行部分JS文件加载
1、KindEditor
angular.module('AdminApp').directive('uiKindeditor',['uiLoad',function(uiLoad){
return{
restrict:'EA',
require:'?ngModel',
link:function(scope,element,attrs,ctrl){
uiLoad.load('../Areas/AdminManage/Content/Vendor/jquery/kindeditor/kindeditor-all.js').then(function(){
var_initContent,editor;
varfexUE={
initEditor:function(){
editor=KindEditor.create(element[0],{
width:'100%',
height:'400px',
resizeType:1,
uploadJson:'/Upload/Upload_Ajax.ashx',
formatUploadUrl:false,
allowFileManager:true,
afterChange:function(){
ctrl.$setViewValue(this.html());
}
});
},
setContent:function(content){
if(editor){
editor.html(content);
}
}
}
if(!ctrl){
return;
}
_initContent=ctrl.$viewValue;
ctrl.$render=function(){
_initContent=ctrl.$isEmpty(ctrl.$viewValue)?'':ctrl.$viewValue;
fexUE.setContent(_initContent);
};
fexUE.initEditor();
});
}
}
}]);
2、UEditor:
angular.module("AdminApp").directive('uiUeditor',["uiLoad","$compile",function(uiLoad,$compile){
return{
restrict:'EA',
require:'?ngModel',
link:function(scope,element,attrs,ctrl){
uiLoad.load(['../Areas/AdminManage/Content/Vendor/jquery/ueditor/ueditor.config.js',
'../Areas/AdminManage/Content/Vendor/jquery/ueditor/ueditor.all.js']).then(function(){
var_self=this,
_initContent,
editor,
editorReady=false
varfexUE={
initEditor:function(){
var_self=this;
if(typeofUE!='undefined'){
editor=newUE.ui.Editor({
initialContent:_initContent,
autoHeightEnabled:false,
autoFloatEnabled:false
});
editor.render(element[0]);
editor.ready(function(){
editorReady=true;
_self.setContent(_initContent);
editor.addListener('contentChange',function(){
scope.$apply(function(){
ctrl.$setViewValue(editor.getContent());
});
});
});
}
},
setContent:function(content){
if(editor&&editorReady){
editor.setContent(content);
}
}
};
if(!ctrl){
return;
}
_initContent=ctrl.$viewValue;
ctrl.$render=function(){
_initContent=ctrl.$isEmpty(ctrl.$viewValue)?'':ctrl.$viewValue;
fexUE.setContent(_initContent);
};
fexUE.initEditor();
});
}
};
}]);
3、jquery.Datatable：
angular.module('AdminApp').directive('uiDatatable',['uiLoad','$compile',function(uiLoad,$compile){
returnfunction($scope,$element,attrs){
$scope.getChooseData=function(){
varlistID="";
varchooseData=$element.find("input[name=IsChoose]:checkbox:checked");
if(chooseData.length>0){
for(vari=0;i<chooseData.length;i++){
listID+=chooseData[i].value+",";
}
}
returnlistID.substring(0,listID.length-1);
}
$scope.refreshTable=function(){
$scope.dataTable.fnClearTable(0);//清空数据
$scope.dataTable.fnDraw();//重新加载数据
}
uiLoad.load(['../Areas/AdminManage/Content/Vendor/jquery/datatables/jquery.dataTables.min.js',
'../Areas/AdminManage/Content/Vendor/jquery/datatables/dataTables.bootstrap.js',
'../Areas/AdminManage/Content/Vendor/jquery/datatables/dataTables.bootstrap.css']).then(function(){
varoptions={};
if($scope.dtOptions){
angular.extend(options,$scope.dtOptions);
}
options["processing"]=false;
options["info"]=false;
options["serverSide"]=true;
options["language"]={
"processing":'正在加载...',
"lengthMenu":"每页显示_MENU_条记录数",
"zeroRecords":'<divstyle="text-align:center;font-size:12px">没有找到相关数据</div>',
"info":"当前显示第_PAGE_页共_PAGES_页",
"infoEmpty":"空",
"infoFiltered":"搜索到_MAX_条记录",
"search":"搜索",
"paginate":{
"first":"首页",
"previous":"上一页",
"next":"下一页",
"last":"末页"
}
}
options["fnRowCallback"]=function(nRow,aData,iDisplayIndex,iDisplayIndexFull){
$compile(nRow)($scope);
}
$scope.dataTable=$element.dataTable(options);
});
$element.find("theadth").each(function(){
$(this).on("click","input:checkbox",function(){
varthat=this;
$(this).closest('table').find('tr>td:first-childinput:checkbox').each(function(){
this.checked=that.checked;
$(this).closest('tr').toggleClass('selected');
});
});
})
}
}]);
以上3则就是本人编写的AngularJS指令，这里抛砖引玉下，希望对小伙伴们能有所帮助，