Angularjs_AngularJS に KindEditor、UEidtor、jQuery 命令を記述する

現在、angularJS は非常に人気があり、私はこのテクノロジーを私のプロジェクトで徐々に使用しています。angularJS では、命令が非常に重要な部分であると言えます。

注: プロジェクトにいくつかの JS ファイルをロードするために oclazyload を使用しました

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(function () {
                var _initContent、エディター;
                var fexUE = {
                    initEditor: function () {
                        editor = KindEditor.create(element[0], {
                            幅: '100%'、
                            高さ: '400px'、
                            サイズ変更タイプ: 1、
                            UploadJson: '/Upload/Upload_Ajax.ashx',
                            formatUploadUrl: false,
                            allowedFileManager: true、
                            afterChange: function () {
                                ctrl.$setViewValue(this.html());
                            }
                        });
                    }、
                    setContent: 関数 (コンテンツ) {
                        if (編集者) {
                            editor.html(コンテンツ);
                        }
                    }
                }
                if (!ctrl) {
                    戻る;
                }
                _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) {
    戻り値 {
        制限: 'EA',
        必要: '?ngModel',
        リンク: 関数 (スコープ、要素、属性、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 = これ,
                            _initContent、
                            編集者、
                            editorReady = false
                       var fexUE = {
                           initEditor: function () {
                               var _self = this;
                               if (UE のタイプ != '未定義') {
                                   editor = new UE.ui.Editor({
                                       初期コンテンツ: _initContent,
                                       autoHeightEnabled: false,
                                       autoFloatEnabled: false
                                   });
                                   editor.render(要素[0]);
                                   editor.ready(function () {
                                       editorReady = true;
                                       _self.setContent(_initContent);
                                       editor.addListener('contentChange', function () {
                                           スコープ.$apply(function () {
                                               ctrl.$setViewValue(editor.getContent());
                                           });
                                       });
                                   });
                               }
                           }、
                           setContent: 関数 (コンテンツ) {
                               if (エディター && editorReady) {
                                   editor.setContent(content);
                               }
                           }
                       };
                       if (!ctrl) {
                           戻る;
                       }
                       _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": "現在、_PAGES_ の _PAGE_ ページを表示しています",
"infoEmpty": "空",
"infoFiltered": "_MAX_ 個のレコードが見つかりました",
"検索": "検索",
「ページネーション」: {
"最初": "ホーム"、
"前": "前のページ",
"next": "次のページ",
"last": "最後のページ"
} }
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 の手順であり、友人たちに役立つことを願っています。