Angularjs編寫KindEditor,UEidtor,jQuery指令_AngularJS

　　目前angularJS非常火熱，本人也在專案中逐漸使用該技術，在angularJS中，指令可以說是當中非常重要的一部分，這裡分享一些自己編寫的指令：

　　註：本人專案中用了oclazyload進行部​​分JS檔案載入

　　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,
                            請使用檔案管理員：true，
                            變更後：函數 () {
                                ctrl.$setViewValue(this.html());
                            }
                        });
                    },
                    setContent: 函數（內容）{
                        若（編者）{
                            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，
                            編輯，且
                            式子就緒 = false
                       var fexUE = {
                           initEditor: function () {
                              var _self = this;
                              if (UE 種類！= '未定義') {
   if (UE類型！= '未定義') {
                                   編譯者 = newUE.ui.                                                                        地                                                                         ));
;                                    editor.render(element[0]);;                                }
                           },
                                                會                                   工作).set且內容(內容);
;
;
;
;
;                                }
                           }
                       };
                      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": "目前顯示第 _PAGE_ 頁 共 _PAGES_ 頁",
                        "infoEmpty": "空白",
                        "infoFiltered": "搜尋至 _MAX_ 筆記錄",
                        "search": "搜尋",
                        "paginate": {
                            "first": "首頁",
                            "previous": "上一頁",
                            "next": "下一頁",
                            "last": "最後一頁"
                        }
                    }
                                            $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指令，這裡拋磚引玉下，希望對小夥伴們能有所幫助，