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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 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
php两种无限分类方法实例
2015/04/21 PHP
用PHP代码给图片加水印
2015/07/01 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python中为什么要用self探讨
2015/04/14 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
零基础小白多久能学会python
2020/06/22 Python
Python常用数据分析模块原理解析
2020/07/20 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
ktv收银员岗位职责
2013/12/16 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
办理护照工作证明
2014/10/10 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
Java对文件的读写操作方法
2022/04/29 Java/Android