Angularjs_AngularJS에서 KindEditor, UEidtor, jQuery 지침 작성

현재 AngleJS는 매우 인기가 높으며 저는 이 기술을 내 프로젝트에 점차적으로 사용하고 있습니다. 다음은 제가 작성한 몇 가지 지침입니다.

참고: 내 프로젝트에서 일부 JS 파일을 로드하기 위해 olazyload를 사용했습니다

1. KindEditor

코드 복사 코드는 다음과 같습니다.

angular.module('AdminApp').directive('uiKindeditor', ['uiLoad', function (uiLoad) {
    반환 {
        제한: 'EA',
        필요: '?ngModel',
        링크: 함수(범위, 요소, 속성, Ctrl) {
            uiLoad.load('../Areas/AdminManage/Content/Vendor/jquery/kindeditor/kindeditor-all.js').then(함수 () {
                var _initContent, 편집기;
                var fexUE = {
                    initEditor: 함수() {
                        editor = KindEditor.create(요소[0], {
                            너비: '100%',
                            높이: '400px',
                            크기 조정 유형: 1,
                            uploadJson: '/Upload/Upload_Ajax.ashx',
                            formatUploadUrl: false,
                            allowedFileManager: true,
                            afterChange: 함수 () {
                                ctrl.$setViewValue(this.html());
                            }
                        });
                    },
                    setContent: 함수(콘텐츠) {
                        if (편집자) {
                            editor.html(content);
                        }
                    }
                }
                if (!ctrl) {
                    반품;
                }
                _initContent = ctrl.$viewValue;
                ctrl.$render = 함수 () {
                    _initContent = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
                    fexUE.setContent(_initContent);
                };
                       fexUE.initEditor();
            });
}
}
}]);

2. UEditor:

코드 복사 코드는 다음과 같습니다.

angular.module("AdminApp").directive('uiUeditor', ["uiLoad", "$compile", function (uiLoad, $compile) {
    반환 {
        제한: 'EA',
        필요: '?ngModel',
        링크: 함수(범위, 요소, 속성, Ctrl) {
            uiLoad.load(['../Areas/AdminManage/Content/Vendor/jquery/ueditor/ueditor.config.js',
                   '../Areas/AdminManage/Content/Vendor/jquery/ueditor/ueditor.all.js']).then(함수 () {
                       var _self = 이,
                            _initContent,
                            편집장
                            editorReady = false
                       var fexUE = {
                           initEditor: 함수() {
                               var _self = this;
                               if (UE 유형 != '정의되지 않음') {
                                   editor = new UE.ui.Editor({
                                       초기 콘텐츠: _initContent,
                                       autoHeightEnabled: 거짓,
                                       autoFloatEnabled: 거짓
                                   });
                                   editor.render(요소[0]);
                                   editor.ready(함수 () {
                                       editorReady = true;
                                       _self.setContent(_initContent);
                                       editor.addListener('contentChange', function () {
                                           범위.$적용(함수 () {
                                               ctrl.$setViewValue(editor.getContent());
                                           });
                                       });
                                   });
                               }
                           },
                           setContent: 함수(콘텐츠) {
                               if (editor && editorReady) {
                                   editor.setContent(content);
                               }
                           }
                       };
                       if (!ctrl) {
                           반품;
                       }
                       _initContent = ctrl.$viewValue;
                       ctrl.$render = 함수 () {
                           _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": "현재 _PAGES_ 중 _PAGE_ 페이지를 표시 중입니다.",
"infoEmpty": "비어 있음",
"infoFiltered": "_MAX_개의 레코드를 찾았습니다",
"검색": "검색",
"페이지 매기기": {
"첫번째": "집",
"이전": "이전 페이지",
"다음": "다음 페이지",
"마지막": "마지막 페이지"
|                  }
options["fnRowCallback"] = 함수(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                               $compile(nRow)($scope);
                 }
$scope.dataTable = $element.dataTable(옵션);
                });
          $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 지침입니다.