Angularjs编写KindEditor,UEidtor,jQuery指令


Posted in Javascript onJanuary 28, 2015

目前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指令,这里抛砖引玉下,希望对小伙伴们能有所帮助,

Javascript 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
调试JavaScript中正则表达式中遇到的问题
Jan 27 #Javascript
JavaScript插件化开发教程 (四)
Jan 27 #Javascript
JavaScript插件化开发教程 (三)
Jan 27 #Javascript
js实现简单随机抽奖的方法
Jan 27 #Javascript
JavaScript插件化开发教程 (二)
Jan 27 #Javascript
javascript将数字转换整数金额大写的方法
Jan 27 #Javascript
JS实现同时搜索百度和必应的方法
Jan 27 #Javascript
You might like
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
python实现计算器功能
2019/10/31 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
英国行业制服供应商:Alexandra
2019/09/14 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
部队党性分析材料
2014/02/16 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
学校交通安全责任书
2014/08/25 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript