javascript - angularjs I want to write a simple toast, how to implement it?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

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

javascript - angularjs I want to write a simple toast, how to implement it?

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

804

The idea is to use directives to implement it, but I am stuck and don’t know how to expose the API to the controller

I want to call the APIxxx.showToastin the controller when popping up the toast, but I don’t know how to get this interface, and the directive cannot be used as a dependency injection. I am stuck here. I hope you can give me some advice.

过去多啦不再A梦

reply all (4)

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

You can just take the directive and write it and use it directly

css code

.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 code

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); } }); } };

});

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

}