Heim > Web-Frontend > js-Tutorial > Schreiben Sie KindEditor-, UEidtor- und jQuery-Anweisungen in Angularjs_AngularJS

Schreiben Sie KindEditor-, UEidtor- und jQuery-Anweisungen in Angularjs_AngularJS

WBOY
Freigeben: 2016-05-16 16:17:39
Original
1142 Leute haben es durchsucht

Derzeit ist AngularJS sehr beliebt und ich verwende diese Technologie nach und nach in meinen Projekten. Man kann sagen, dass Anweisungen ein sehr wichtiger Teil sind. Hier sind einige Anweisungen, die ich geschrieben habe:

Hinweis: Ich habe oclazyload verwendet, um einige JS-Dateien in mein Projekt zu laden

1. KindEditor

Code kopieren Der Code lautet wie folgt:

angle.module('AdminApp').directive('uiKindeditor', ['uiLoad', function (uiLoad) {
    zurück {
        einschränken: 'EA',
        erfordern: '?ngModel',
        Link: Funktion (Bereich, Element, Attribute, Strg) {
            uiLoad.load('../Areas/AdminManage/Content/Vendor/jquery/kindeditor/kindeditor-all.js').then(function () {
                var _initContent, Editor;
                var fexUE = {
                    initEditor: Funktion () {
                        editor = KindEditor.create(element[0], {
                            Breite: '100%',
                            Höhe: '400px',
                            resizeType: 1,
                            uploadJson: '/Upload/Upload_Ajax.ashx',
                            formatUploadUrl: false,
                            AllowFileManager: true,
                            afterChange: Funktion () {
                                ctrl.$setViewValue(this.html());
                            }
                        });
                    },
                    setContent: Funktion (Inhalt) {
                        if (Herausgeber) {
                            editor.html(content);
                        }
                    }
                }
                if (!ctrl) {
                    zurück;
                }
                _initContent = ctrl.$viewValue;
                ctrl.$render = function () {
                    _initContent = ctrl.$isEmpty(ctrl.$viewValue) ? '': ctrl.$viewValue;
                    fexUE.setContent(_initContent);
                };
                        fexUE.initEditor();
            });
}
}
}]);

2. UEditor:

Code kopieren Der Code lautet wie folgt:

angle.module("AdminApp").directive('uiUeditor', ["uiLoad", "$compile", function (uiLoad, $compile) {
    zurück {
        einschränken: 'EA',
        erfordern: '?ngModel',
        Link: Funktion (Bereich, Element, Attribute, Strg) {
            uiLoad.load(['../Areas/AdminManage/Content/Vendor/jquery/ueditor/ueditor.config.js',
                   '../Areas/AdminManage/Content/Vendor/jquery/ueditor/ueditor.all.js']).then(function () {
                       var _self = this,
                            _initContent,
                            Herausgeber,
                            editorReady = false
                       var fexUE = {
                           initEditor: Funktion () {
                               var _self = this;
                               if (typeof UE != 'undefiniert') {
                                   editor = new UE.ui.Editor({
                                       initialContent: _initContent,
                                       autoHeightEnabled: false,
                                       autoFloatEnabled: false
                                   });
                                   editor.render(element[0]);
                                   editor.ready(function () {
                                       editorReady = true;
                                       _self.setContent(_initContent);
                                       editor.addListener('contentChange', function () {
                                           Scope.$apply(function () {
                                               ctrl.$setViewValue(editor.getContent());
                                           });
                                       });
                                   });
                               }
                           },
                           setContent: Funktion (Inhalt) {
                               if (editor && editorReady) {
                                   editor.setContent(content);
                               }
                           }
                       };
                       if (!ctrl) {
                           zurück;
                       }
                       _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“: „Derzeit wird Seite _PAGE_ von _PAGES_ angezeigt“,
„infoEmpty“: „Leer“,
„infoFiltered“: „_MAX_ Datensätze gefunden“,
„Suche“: „Suche“,
„paginieren“: {
„first“: „Zuhause“,
„vorherige“: „vorherige Seite“,
„next“: „Nächste Seite“,
„last“: „letzte Seite“
                                                                                                       }                  }
Optionen["fnRowCallback"] = Funktion (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                                $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');
                });
            });
         })
}
}]);

Die oben genannten 3 sind die von mir geschriebenen AngularJS-Anweisungen. Ich hoffe, sie können meinen Freunden hilfreich sein
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage