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
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:
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