javascript - angularjs I want to write a simple toast, how to implement it?

Question

The idea is to use directives to implement it, but I am stuck and don’t know how to expose the API to the controller

I want to call the API xxx.showToast in the controller when popping up the toast, but I don’t know how to get this interface, and the directive cannot be used as a dependency injection. I am stuck here. I hope you can give me some advice.

Answer 1

You can just take the directive and write it and use it directly

css code

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

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 usage

<toast ng-model="toast" position="center"></toast>

Controller usage

$scope.toast = { text: "Hellow", type: 1, timeout: 1000, max: 2 };

Answer 2

You can use AngularJS-Toaster
https://github.com/jirikavi/A...

Answer 3

The angularjs-toaster mentioned above is very easy to use and can be used. Or write a service and use it through di.

Answer 4

I have used sweet alert before and it seems to be ok.
http://t4t5.github.io/sweetal...