javascript - angularjs Saya ingin menulis roti bakar mudah, bagaimana untuk melaksanakannya?-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - angularjs Saya ingin menulis roti bakar mudah, bagaimana untuk melaksanakannya?

过去多啦不再A梦 2017-06-28 09:26:14

787

Ideanya adalah untuk menggunakan arahan untuk melaksanakannya, tetapi saya tersekat dan tidak tahu cara untuk mendedahkan API kepada pengawal

Saya mahu memanggil API dalam pengawal apabila roti bakar munculxxx.showToast, tetapi saya tidak tahu bagaimana untuk mendapatkan antara muka ini, dan arahan itu tidak boleh digunakan sebagai suntikan pergantungan saya harap anda boleh berikan saya nasihat.

过去多啦不再A梦

membalas semua (4)

曾经蜡笔没有小新2017-06-28 09:28:14 Tingkat 4

Anda hanya boleh mengambil arahan dan menulisnya dan menggunakannya secara terus

kod css

.kotak roti bakar{

position:absolute; top:45%; z-index:99; max-height:250px; overflow-y:auto; margin:0 auto; float:left; left:50px; right:50px; text-align:center;

}
.toast-top{

top:0;

}
.toast-bottom{

top:auto; bottom:0;

}
.kotak-toast .item-toast{

display:inline-block; margin-top:5px; padding:0 20px; max-width:100%; height: 40px; line-height: 40px; color:#fff; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border-radius:6px; font-size: 14px; background-color: rgba(0, 0, 0, 0.8);

}
.toast-box .toast-item.toast-success{

background-color: rgba(40,165,76, 0.8);

}
.toast-box .toast-item.toast-error{

background-color: rgba(217,83,79, 0.8);

}
.toast-box .toast-item.toast-warn{

background-color: rgba(240,173,78, 0.8);

}
.toast-box .toast-item.toast-info{

background-color: rgba(3,155,229, 0.8);

}

kod arahan

angular.module('app').directive('toast', function() {

return { restrict: 'E', require: 'ngModel', scope: { ngModel: '=' }, link: function (scope, element, attr, ctrl) { /* * Read before you modify * this is a Object Sample : {text:"prompt content",type:"prompt style",timeout:"display time",max:"Display maximum number"} * If you need to add attributes! Please update the Object Sample */ var objSample = { text: "prompt content", type: 4, timeout: 3000, max: 3 }; var position = attr.position||'center'; $('.toast-'+position).remove(); var box = $('
').appendTo('body'); scope.$watch('ngModel', function (newValue) { if (!newValue) return; var value; if (angular.isString(newValue)) { value = { text: newValue }; } else { value = angular.copy(newValue); } var timeout = isNaN(value.timeout) ? objSample.timeout : value.timeout; if (value.text != undefined && value.text != "") { var isMax = box.find("p").length >= (value.max || objSample.max) if (isMax) return; //var item = $('' + value.text + '

').appendTo(box); var item = $('' + value.text + '

').appendTo(box); setTimeout(function () { //item.addClass('fadeOutUp'); setTimeout(function () { item.remove(); }, 500); }, timeout); } }); } };

});

fungsi getToastClass(jenis) {

var toast_class; switch (type) { case 1: toast_class = "success"; break; case 2: toast_class = "error"; break; case 3: toast_class = "warn"; break; case 4: toast_class = "info"; break; default: toast_class = "undefined"; break; } return toast_class

}