Angularjs编写KindEditor,UEidtor,jQuery指令
程序员文章站
2022-06-26 08:53:02
目前angularjs非常火热,本人也在项目中逐渐使用该技术,在angularjs中,指令可以说是当中非常重要的一部分,这里分享一些自己编写的指令:
注:本人项目...
目前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;
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:
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:
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); //清空数据
$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 () {
var options = {};
if ($scope.dtoptions) {
angular.extend(options, $scope.dtoptions);
}
options["processing"] = false;
options["info"] = false;
options["serverside"] = true;
options["language"] = {
"processing": '正在加载...',
"lengthmenu": "每页显示 _menu_ 条记录数",
"zerorecords": '<div style="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("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指令,这里抛砖引玉下,希望对小伙伴们能有所帮助,
上一篇: 输入URL到显示页面发生了什么才会导致浏览器渲染、回流和重绘?
下一篇: Windows编程的本质
推荐阅读
-
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
-
Angularjs编写KindEditor,UEidtor,jQuery指令
-
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
-
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框_AngularJS
-
Angularjs编写KindEditor,UEidtor,jQuery指令_AngularJS
-
Angularjs编写KindEditor,UEidtor,jQuery指令_AngularJS
-
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框_AngularJS
-
Angularjs编写KindEditor,UEidtor,jQuery指令