javascript - angulairejs Je souhaite écrire un toast simple, comment l'implémenter ?

Question

L'idée est d'utiliser des directives pour l'implémenter, mais je suis bloqué et je ne sais pas comment exposer l'API au contrôleur

Je veux appeler l'API dans le contrôleur lorsque le toast apparaît xxx.showToast, mais je ne sais pas comment obtenir cette interface, et la directive ne peut pas être utilisée comme injection de dépendance. Je suis coincé ici, j'espère que vous pourrez la donner. moi quelques conseils.

曾经蜡笔没有小新 · Answer

Vous pouvez simplement prendre la directive, l'écrire et l'utiliser directement

code 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);

}

code directif

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 = $('').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 = $('' + value.text + '

').appendTo(box);
                    var item = $('' + value.text + '

').appendTo(box);
                 
                    setTimeout(function () {
                        //item.addClass('fadeOutUp');
                        setTimeout(function () {
                            item.remove();
                        }, 500);
                    }, timeout);
                }

        });
    }
};

});

fonction 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