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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
调试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
用PHP4访问Oracle815
2006/10/09 PHP
PHP 的 __FILE__ 常量
2007/01/15 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
使用PHP编写发红包程序
2015/07/22 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript高亮效果的二种实现方法
2008/09/14 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
java字符串格式化输出实例讲解
2021/01/06 Python
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
献爱心捐款倡议书
2014/05/14 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
安全知识竞赛主持词
2015/06/30 职场文书