首頁 > web前端 > js教程 > Angularjs編寫KindEditor,UEidtor,jQuery指令_AngularJS

Angularjs編寫KindEditor,UEidtor,jQuery指令_AngularJS

WBOY
發布: 2016-05-16 16:17:39
原創
1142 人瀏覽過

  目前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指令,這裡拋磚引玉下,希望對小夥伴們能有所幫助,

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板