Home > Web Front-end > JS Tutorial > Write KindEditor, UEidtor, jQuery instructions in Angularjs_AngularJS

Write KindEditor, UEidtor, jQuery instructions in Angularjs_AngularJS

WBOY
Release: 2016-05-16 16:17:39
Original
1139 people have browsed it

At present, angularJS is very popular, and I am gradually using this technology in my projects. In angularJS, instructions can be said to be a very important part. Here are some instructions I have written:

Note: I used oclazyload to load some JS files in my project

1. KindEditor

Copy code The code is as follows:

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:

Copy code The code is as follows:

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": "Currently displaying page _PAGE_ of _PAGES_",
"infoEmpty": "Empty",
"infoFiltered": "_MAX_ records found",
"search": "search",
“paginate”: {
"first": "Home",
"previous": "previous page",
"next": "Next page",
"last": "last page"
                                                                                                       }                  }
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');
                });
            });
         })
}
}]);

The above 3 are the AngularJS instructions written by me. I hope they can be helpful to my friends.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template