Angularjs编写KindEditor,UEidtor,jQuery指令

前端技术 2023/09/03 JavaScript

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

本文地址：https://www.stayed.cn/item/6860

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案