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

Écrivez des instructions KindEditor, UEidtor, jQuery dans Angularjs_AngularJS

WBOY
WBOYoriginal
2016-05-16 16:17:391121parcourir

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

.

Déclaration:
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