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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
js切换光标示例代码
Oct 10 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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制作静态网站的模板框架(二)
2006/10/09 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php一个找二层目录的小东东
2012/08/02 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Python bisect模块原理及常见实例
2020/06/17 Python
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
连锁酒店店长职责范本
2014/02/13 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2014小学年度工作总结
2014/12/20 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记