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
$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使用
控制器使用
$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...