Angularjs编写KindEditor,UEidtor,jQuery指令  更新时间:2015年01月28日 08:57:10   投稿:hebedich   使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架。   目前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": '没有找到相关数据’,                         “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指令,这里抛砖引玉下,希望对小伙伴们能有所帮助, 您可能感兴趣的文章: Angular1.x自定义指令实例详解 Angular之指令Directive用法详解 Angular.js自定义指令学习笔记实例 详解Angular.js指令中scope类型的几种特殊情况 angular分页指令操作 AngularJS内置指令 AngularJS学习笔记之基本指令(init、repeat) AngularJS中的指令全面解析(必看) 用AngularJS的指令实现tabs切换效果 深入讲解AngularJS中的自定义指令的使用 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框 Angular1.x复杂指令实例详解 AngularJS 指令 相关文章 Angularjs自定义指令Directive详解 Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识,感兴趣的朋友一起学习吧 2017-05-05 Angular2使用Guard和Resolve进行验证和权限控制 本篇文章主要介绍了Angular2使用Guard和Resolve进行验证和权限控制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 Angular6中使用Swiper的方法示例 这篇文章主要介绍了Angular6中使用Swiper的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 Bootstrap与Angularjs的模态框实例代码 这篇文章主要介绍了Bootstrap与Angularjs的模态框实例代码,需要的朋友可以参考下 2017-08-08 Angular 2 利用Router事件和Title实现动态页面标题的方法 本篇文章主要介绍了Angular 2 利用Router事件和Title实现动态页面标题的方法,具有一定的参考价值,有兴趣的可以了解一下 2017-08-08 使用angular-cli webpack创建多个包的方法 这篇文章主要介绍了使用angular-cli webpack创建多个包的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-10-10 详解Angular5 服务端渲染实战 本篇文章主要介绍了详解Angular5 服务端渲染实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 对angularJs中$sce服务安全显示html文本的实例 今天小编就为大家分享一篇对angularJs中$sce服务安全显示html文本的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 Angular4学习教程之DOM属性绑定详解 这篇文章主要给大家介绍了关于Angular4学习教程之DOM属性绑定的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2018-01-01 如何编写一个完整的Angular4 FormText 组件 本篇文章主要介绍了如何编写一个完整的Angular4 FormText 组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 最新评论

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

您可能感兴趣的文章:

  • Angular1.x自定义指令实例详解
  • Angular之指令Directive用法详解
  • Angular.js自定义指令学习笔记实例
  • 详解Angular.js指令中scope类型的几种特殊情况
  • angular分页指令操作
  • AngularJS内置指令
  • AngularJS学习笔记之基本指令(init、repeat)
  • AngularJS中的指令全面解析(必看)
  • 用AngularJS的指令实现tabs切换效果
  • 深入讲解AngularJS中的自定义指令的使用
  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
  • Angular1.x复杂指令实例详解
张贴在3