問(wèn)題描述

思路是使用directive來(lái)實(shí)現(xiàn)，但卡在不知道怎么暴露API給controller

我想彈出toast的時(shí)候在controller里調(diào)用API xxx.showToast,但不知道怎么才能取到這個(gè)接口，directive也不能作為依賴注入，卡在這里了，望指教。

問(wèn)題解答

你directive接過(guò)去寫就可以直接使用了

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

樓上說(shuō)的angularjs-toaster挺好用的，可以用用。或者寫個(gè)service，通過(guò)di來(lái)使用。

之前用過(guò)sweet alert，感覺(jué)也還行。http://t4t5.github.io/sweetal...