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. 文件服務器 - Python服務器之間文件同步如何實現？2. objective-c - 從朋友圈跳到我的APP 如何實現？3. html - css導航欄模糊，導航欄固定，隨著頁面滑動對下方頁面產生模糊效果，如何實現？4. mysql - sql 列值作為新表的字段名稱，如何實現？5. javascript - 循環嵌套多個promise應該如何實現？6. html5 - 基于vue的圖片查看，如何實現？7. css3 - 鼠標hover觸發圓形邊框旋轉后消失動畫如何實現？8. javascript - 這種查詢前端如何實現？9. javascript - 剛開始后邊的內容沒有加載，伴隨鼠標向下滾動，后邊內容逐漸加載的效果如何實現？10. html5 - 這個代碼顯示功能如何實現？
網公網安備