Heim > Web-Frontend > js-Tutorial > Hauptteil

Angularjs编写KindEditor,UEidtor,jQuery指令_AngularJS

WBOY
Freigeben: 2016-05-16 16:17:39
Original
1011 人浏览过

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!