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脚本调试方法小结
Nov 24 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
js实现图片3D轮播效果
Sep 21 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
php项目打包方法
2008/02/18 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
php实现可运算的验证码
2015/11/10 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
详解YII关联查询
2016/01/10 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python-基础-入门 简介
2014/08/09 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
python如何实现视频转代码视频
2019/06/17 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
nohup的用法
2014/08/10 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
管理建议书范文
2014/05/13 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
500字作文之关于爸爸
2019/11/14 职场文书