Rumah  >  Artikel  >  hujung hadapan web  >  Tulis arahan KindEditor, UEidtor, jQuery dalam Angularjs_AngularJS

Tulis arahan KindEditor, UEidtor, jQuery dalam Angularjs_AngularJS

WBOY
WBOYasal
2016-05-16 16:17:391097semak imbas

Pada masa ini, angularJS sangat popular, dan saya secara beransur-ansur menggunakan teknologi ini dalam projek saya Dalam angularJS, arahan boleh dikatakan sebagai bahagian yang sangat penting. Berikut adalah beberapa arahan yang saya tulis:

Nota: Saya menggunakan oclazyload untuk memuatkan beberapa fail JS dalam projek saya

1. KindEditor

Salin kod Kod adalah seperti berikut:

angular.module('AdminApp').directive('uiKindeditor', ['uiLoad', function (uiLoad) {
    kembali {
        hadkan: 'EA',
        memerlukan: '?ngModel',
        pautan: fungsi (skop, elemen, attrs, ctrl) {
            uiLoad.load('../Areas/AdminManage/Content/Vendor/jquery/kindeditor/kindeditor-all.js').then(function () {
                var _initContent, editor;
                var fexUE = {
                    initEditor: fungsi () {
                        editor = KindEditor.create(elemen[0], {
                            lebar: '100%',
                            ketinggian: '400px',
                            ubah saizJenis: 1,
                            uploadJson: '/Upload/Upload_Ajax.ashx',
                            formatUploadUrl: palsu,
                            allowFileManager: benar,
                            afterChange: fungsi () {
                                ctrl.$setViewValue(this.html());
                            }
                        });
                    },
                    setContent: fungsi (kandungan) {
                        jika (editor) {
                            editor.html(kandungan);
                        }
                    }
                }
                jika (!ctrl) {
                    kembali;
                }
                _initContent = ctrl.$viewValue;
                ctrl.$render = fungsi () {
                    _initContent = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
                    fexUE.setContent(_initContent);
                };
                        fexUE.initEditor();
            });
}
}
}]);

2. UEeditor:

Salin kod Kod adalah seperti berikut:

angular.module("AdminApp").directive('uiUeditor', ["uiLoad", "$compile", function (uiLoad, $compile) {
    kembali {
        hadkan: 'EA',
        memerlukan: '?ngModel',
        pautan: fungsi (skop, elemen, 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 = ini,
                            _initContent,
                            editor,
                            editorSedia = palsu
                       var fexUE = {
                           initEditor: fungsi () {
                               var _self = ini;
                               jika (jenis UE != 'tidak ditentukan') {
                                   editor = UE.ui.Editor baharu({
                                       initialContent: _initContent,
                                       autoHeightEnabled: palsu,
                                       autoFloatEnabled: palsu
                                   });
                                   editor.render(elemen[0]);
                                   editor.ready(function () {
                                       editorSedia = benar;
                                       _self.setContent(_initContent);
                                       editor.addListener('contentChange', function () {
                                           skop.$apply(function () {
                                               ctrl.$setViewValue(editor.getContent());
                                           });
                                       });
                                   });
                               }
                           },
                           setContent: fungsi (kandungan) {
                               jika (editor && editorSedia) {
                                   editor.setContent(kandungan);
                               }
                           }
                       };
                       jika (!ctrl) {
                           kembali;
                       }
                       _initContent = ctrl.$viewValue;
                       ctrl.$render = fungsi () {
                           _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": "Pada masa ini memaparkan halaman _PAGE_ daripada _PAGES_",
"infoEmpty": "Kosong",
"infoFiltered": "_MAX_ rekod ditemui",
"cari": "cari",
“halaman muka surat”: {
"first": "Home",
"sebelumnya": "halaman sebelumnya",
"next": "Halaman seterusnya",
"last": "halaman terakhir"
                                                                                                                                                                           }
pilihan["fnRowCallback"] = fungsi (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                                $compile(nRow)($scope);
                 }
$scope.dataTable = $element.dataTable(options);
                });
          $element.find("kepala ke").setiap(fungsi () {
                $(this).on("klik", "input:checkbox", fungsi () {
              var that = this;
                     $(ini).terdekat('jadual').cari('tr > td:input anak pertama:kotak semak').setiap(fungsi () {
This.checked = that.checked;
$(this).closest('tr').toggleClass('selected');
                });
            });
})
}
}]);

3 di atas adalah arahan AngularJS yang ditulis oleh saya. Saya harap ia dapat membantu rakan saya
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn