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 1

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 = $('<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);
                }

        });
    }
};

});

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

}

utilisation du HTML

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

Utilisation du contrôleur

$scope.toast = { texte : "Hellow", tapez : 1, délai d'attente : 1000, max :2 };

Answer 2

Vous pouvez utiliser AngularJS-Toaster
https://github.com/jirikavi/A...

Answer 3

Le grille-pain angulaire js mentionné ci-dessus est très simple à utiliser et peut être utilisé. Ou écrivez un service et utilisez-le via di.

Answer 4

J'ai déjà utilisé Sweet Alert et cela semble aller.
http://t4t5.github.io/sweetal...