Angularjs編寫KindEditor,UEidtor,jQuery指令
更新時間：2015年01月28日 08:57:10 投稿：hebedich
使用過 AngularJS 的朋友應(yīng)該最感興趣的是它的指令?，F(xiàn)今市場上的前端框架也只有AngularJS 擁有自定義指令的功能，并且AngularJS 是目前唯一提供Web應(yīng)用可復(fù)用能力的框架。
目前angularJS非?；馃?，本人也在項(xiàng)目中逐漸使用該技術(shù)，在angularJS中，指令可以說是當(dāng)中非常重要的一部分，這里分享一些自己編寫的指令：
注：本人項(xiàng)目中用了oclazyload進(jìn)行部分JS文件加載
1、KindEditor
復(fù)制代碼 代碼如下:
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;
var fexUE = {
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:
復(fù)制代碼 代碼如下:
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
var fexUE = {
initEditor: function () {
var _self = this;
if (typeof UE != 'undefined') {
editor = new UE.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：
復(fù)制代碼 代碼如下:
angular.module('AdminApp').directive('uiDatatable', ['uiLoad', '$compile', function (uiLoad, $compile) {
return function ($scope, $element, attrs) {
$scope.getChooseData = function () {
var listID = "";
var chooseData = $element.find("input[name = IsChoose]:checkbox:checked");
if (chooseData.length > 0) {
for (var i = 0; i < chooseData.length; i++) {
listID += chooseData[i].value + ",";
}
}
return listID.substring(0, listID.length - 1);
}
$scope.refreshTable = function () {
$scope.dataTable.fnClearTable(0); //清空數(shù)據(jù)
$scope.dataTable.fnDraw(); //重新加載數(shù)據(jù)
}
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 () {
var options = {};
if ($scope.dtOptions) {
angular.extend(options, $scope.dtOptions);
}
options["processing"] = false;
options["info"] = false;
options["serverSide"] = true;
options["language"] = {
"processing": '正在加載...',
"lengthMenu": "每頁顯示 _MENU_ 條記錄數(shù)",
"zeroRecords": '<div style="text-align:center;font-size:12px">沒有找到相關(guān)數(shù)據(jù)</div>',
"info": "當(dāng)前顯示第 _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("thead th").each(function () {
$(this).on("click", "input:checkbox", function () {
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox').each(function () {
this.checked = that.checked;
$(this).closest('tr').toggleClass('selected');
});
});
})
}
}]);
以上3則就是本人編寫的AngularJS指令，這里拋磚引玉下，希望對小伙伴們能有所幫助，
相關(guān)文章
使用AngularJS實(shí)現(xiàn)可伸縮的頁面切換的方法
這篇文章主要介紹了使用AngularJS實(shí)現(xiàn)可伸縮的頁面切換的方法,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
本文主要介紹AngularJS 引導(dǎo)程序,這里整理了相關(guān)資料及示例代碼，詳細(xì)講解了引導(dǎo)程序的知識要點(diǎn)，有興趣的小伙伴可以參考下2016-08-08
Angular.js如何從PHP讀取后臺數(shù)據(jù)
這篇文章主要為大家簡單介紹了Angular.js如何從PHP讀取后臺數(shù)據(jù)，本文將Angular和PHP相結(jié)合，從后臺讀取數(shù)據(jù)，感興趣的小伙伴們可以參考一下2016-03-03
AngularJS折疊菜單實(shí)現(xiàn)方法示例
這篇文章主要介紹了AngularJS折疊菜單實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)折疊菜單的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
這篇文章總結(jié)了一些Angular的應(yīng)用技巧,都是在實(shí)際項(xiàng)目中應(yīng)用了的,感覺對于使用Angular還是有一些幫助的，有需要的小伙伴可以參考下2016-09-09
這篇文章主要介紹了js常用正則表達(dá)式集錦，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了Angular應(yīng)用懶加載模塊配置管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
AngularJS 前臺分頁實(shí)現(xiàn)的示例代碼
本篇文章主要介紹了AngularJS 前臺分頁實(shí)現(xiàn)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例
本篇文章主要介紹了angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Directive是一個非常棒的功能?？梢詫?shí)現(xiàn)我們自義的的功能方法。下面通過實(shí)例代碼給大家介紹Angularjs自定義指令Directive相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2017-05-05