Maison > interface Web > js tutoriel > Écrivez des instructions KindEditor, UEidtor, jQuery dans Angularjs_AngularJS

Écrivez des instructions KindEditor, UEidtor, jQuery dans Angularjs_AngularJS

WBOY
Libérer: 2016-05-16 16:17:39
original
1142 Les gens l'ont consulté

Actuellement, angulaireJS est très populaire, et j'utilise progressivement cette technologie dans mes projets, les instructions peuvent être considérées comme une partie très importante. Voici quelques instructions que j'ai écrites :

Remarque : j'ai utilisé oclazyload pour charger certains fichiers JS dans mon projet

1. KindEditor

Copier le code Le code est le suivant :

angulaire.module('AdminApp').directive('uiKindeditor', ['uiLoad', function (uiLoad) {
    revenir {
        restreindre : 'EA',
        exiger : '?ngModel',
        lien : fonction (portée, élément, attrs, ctrl) {
            uiLoad.load('../Areas/AdminManage/Content/Vendor/jquery/kindeditor/kindeditor-all.js').then(function () {
                var _initContent, éditeur ;
                var fexUE = {
                    initEditor : fonction () {
                        éditeur = KindEditor.create(element[0], {
                            largeur : '100%',
                            hauteur : '400px',
                            resizeType : 1,
                            uploadJson : '/Upload/Upload_Ajax.ashx',
                            formatUploadUrl : faux,
                            AllowFileManager : vrai,
                            afterChange : fonction () {
                                ctrl.$setViewValue(this.html());
                            >
                        });
                    },
                    setContent : fonction (contenu) {
                        si (éditeur) {
                            éditeur.html(contenu);
                        >
                    >
                >
                si (!ctrl) {
                    revenir ;
                >
                _initContent = ctrl.$viewValue;
                ctrl.$render = fonction () {
                    _initContent = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
                    fexUE.setContent(_initContent);
                };
                        fexUE.initEditor();
            });
>
>
}]);

2. UÉditeur :

Copier le code Le code est le suivant :

angulaire.module("AdminApp").directive('uiUeditor', ["uiLoad", "$compile", function (uiLoad, $compile) {
    revenir {
        restreindre : 'EA',
        exiger : '?ngModel',
        lien : fonction (portée, élément, 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 = ceci,
                            _initContent,
                            éditeur,
                            editorReady = false
                       var fexUE = {
                           initEditor : fonction () {
                               var _self = ceci;
                               if (typeof UE != 'indéfini') {
                                   éditeur = nouveau UE.ui.Editor({
                                       contenu initial : _initContent,
                                       autoHeightEnabled : faux,
                                       autoFloatEnabled : faux
                                   });
                                   editor.render(element[0]);
                                   editor.ready(function () {
                                       editorReady = true;
                                       _self.setContent(_initContent);
                                       editor.addListener('contentChange', function() {
                                           scope.$apply(function () {
                                               ctrl.$setViewValue(editor.getContent());
                                           });
                                       });
                                   });
                               >
                           },
                           setContent : fonction (contenu) {
                               if (éditeur && editorReady) {
                                   editor.setContent(content);
                               >
                           >
                       };
                       si (!ctrl) {
                           revenir ;
                       >
                       _initContent = ctrl.$viewValue;
                       ctrl.$render = fonction () {
                           _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": "La page _PAGE_ sur _PAGES_ est actuellement affichée",
"infoEmpty": "Vide",
"infoFiltered": "_MAX_ enregistrements trouvés",
"recherche": "recherche",
"paginer": {
"first": "Accueil",
"previous": "page précédente",
"next": "Page suivante",
"dernière": "dernière page"
                                                                                                          }                  }
options["fnRowCallback"] = fonction (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 ça = ceci ;
                     $(this).closest('table').find('tr > td:first-child input:checkbox').each(function () {
Ceci.checked = cela.checked;
                              $(this).closest('tr').toggleClass('selected');
                });
            });
         })
>
}]);

Les 3 ci-dessus sont les instructions AngularJS écrites par moi. J'espère qu'elles pourront être utiles à mes amis

.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal