javascript - angularjs 想写一个简单的toast，如何实现？
问题描述
思路是使用directive来实现，但卡在不知道怎么暴露API给controller
我想弹出toast的时候在controller里调用API xxx.showToast,但不知道怎么才能取到这个接口，directive也不能作为依赖注入，卡在这里了，望指教。
问题解答
回答1：你directive接过去写就可以直接使用了
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：楼上说的angularjs-toaster挺好用的，可以用用。或者写个service，通过di来使用。
回答4：之前用过sweet alert，感觉也还行。http://t4t5.github.io/sweetal...
相关文章：
1. mysql - sql 列值作为新表的字段名称，如何实现？2. 请问带渐变背景的进度条如何实现？求给点思路3. html5 - 这个代码显示功能如何实现？4. html - css导航栏模糊，导航栏固定，随着页面滑动对下方页面产生模糊效果，如何实现？5. css3 - 鼠标hover触发圆形边框旋转后消失动画如何实现？6. javascript - 这种查询前端如何实现？7. html5 - 基于vue的图片查看，如何实现？8. 文件服务器 - Python服务器之间文件同步如何实现？9. objective-c - 从朋友圈跳到我的APP 如何实现？10. javascript - 刚开始后边的内容没有加载，伴随鼠标向下滚动，后边内容逐渐加载的效果如何实现？
网公网安备