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