javascript - angularjs 想寫一個(gè)簡(jiǎn)單的toast，如何實(shí)現(xiàn)？
問(wèn)題描述
思路是使用directive來(lái)實(shí)現(xiàn)，但卡在不知道怎么暴露API給controller
我想彈出toast的時(shí)候在controller里調(diào)用API xxx.showToast,但不知道怎么才能取到這個(gè)接口，directive也不能作為依賴注入，卡在這里了，望指教。
問(wèn)題解答
回答1：你directive接過(guò)去寫就可以直接使用了
css代碼.toast-box{
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;
}.toast-box .toast-item{
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);
}
directive代碼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 = $(’<p class='toast-box toast-’ + position + ’'></p>’).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 = $(’<p class='toast-item toast-’ + getToastClass(value.type) + ’ animated fadeInDown'>’ + value.text + ’</p><br/>’).appendTo(box); var item = $(’<p class='toast-item toast-’ + getToastClass(value.type) + ’'>’ + value.text + ’</p><br/>’).appendTo(box); setTimeout(function () {//item.addClass(’fadeOutUp’);setTimeout(function () { item.remove();}, 500); }, timeout);}}); }};
});
function getToastClass(type) {
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
}
html使用<toast ng-model='toast' position='center'></toast>
控制器使用$scope.toast = { text: 'Hellow', type: 1, timeout: 1000，max:2 };
回答2：可以使用AngularJS-Toasterhttps://github.com/jirikavi/A...
回答3：樓上說(shuō)的angularjs-toaster挺好用的，可以用用。或者寫個(gè)service，通過(guò)di來(lái)使用。
回答4：之前用過(guò)sweet alert，感覺(jué)也還行。http://t4t5.github.io/sweetal...
相關(guān)文章：
1. mysql - sql 列值作為新表的字段名稱，如何實(shí)現(xiàn)？2. objective-c - 從朋友圈跳到我的APP 如何實(shí)現(xiàn)？3. javascript - 循環(huán)嵌套多個(gè)promise應(yīng)該如何實(shí)現(xiàn)？4. html - css導(dǎo)航欄模糊，導(dǎo)航欄固定，隨著頁(yè)面滑動(dòng)對(duì)下方頁(yè)面產(chǎn)生模糊效果，如何實(shí)現(xiàn)？5. javascript - 這種查詢前端如何實(shí)現(xiàn)？6. 請(qǐng)問(wèn)帶漸變背景的進(jìn)度條如何實(shí)現(xiàn)？求給點(diǎn)思路7. 文件服務(wù)器 - Python服務(wù)器之間文件同步如何實(shí)現(xiàn)？8. javascript - 剛開始后邊的內(nèi)容沒(méi)有加載，伴隨鼠標(biāo)向下滾動(dòng)，后邊內(nèi)容逐漸加載的效果如何實(shí)現(xiàn)？9. html5 - 這個(gè)代碼顯示功能如何實(shí)現(xiàn)？10. css3 - 鼠標(biāo)hover觸發(fā)圓形邊框旋轉(zhuǎn)后消失動(dòng)畫如何實(shí)現(xiàn)？
網(wǎng)公網(wǎng)安備