首页 > 代码库 > Angularjs编写KindEditor,UEidtor指令
Angularjs编写KindEditor,UEidtor指令
目前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 = http://www.mamicode.com/function () {""; var chooseData = http://www.mamicode.com/$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‘); }); }); }) }}]);
Angularjs编写KindEditor,UEidtor指令
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。