84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
思路是使用directive来实现,但卡在不知道怎么暴露API给controller
我想弹出toast的时候在controller里调用API xxx.showToast,但不知道怎么才能取到这个接口,directive也不能作为依赖注入,卡在这里了,望指教。
xxx.showToast
你directive接过去写就可以直接使用了
.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);
}
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
<toast ng-model="toast" position="center"></toast>
$scope.toast = { text: "Hellow", type: 1, timeout: 1000,max:2 };
可以使用AngularJS-Toasterhttps://github.com/jirikavi/A...
楼上说的angularjs-toaster挺好用的,可以用用。或者写个service,通过di来使用。
之前用过sweet alert,感觉也还行。http://t4t5.github.io/sweetal...
你directive接过去写就可以直接使用了
css代码
.toast-box{
}
.toast-top{
}
.toast-bottom{
}
.toast-box .toast-item{
}
.toast-box .toast-item.toast-success{
}
.toast-box .toast-item.toast-error{
}
.toast-box .toast-item.toast-warn{
}
.toast-box .toast-item.toast-info{
}
directive代码
angular.module('app').directive('toast', function() {
});
function getToastClass(type) {
}
html使用
<toast ng-model="toast" position="center"></toast>
控制器使用
$scope.toast = { text: "Hellow", type: 1, timeout: 1000,max:2 };
可以使用AngularJS-Toaster
https://github.com/jirikavi/A...
楼上说的angularjs-toaster挺好用的,可以用用。或者写个service,通过di来使用。
之前用过sweet alert,感觉也还行。
http://t4t5.github.io/sweetal...