javascript - AngularJS Ich möchte einen einfachen Toast schreiben, wie setze ich ihn um?

Question

Die Idee ist, Direktiven zu verwenden, um es zu implementieren, aber ich stecke fest und weiß nicht, wie ich die API dem Controller zugänglich machen soll

Ich möchte die API im Controller aufrufen, wenn der Toast erscheint xxx.showToast, aber ich weiß nicht, wie ich diese Schnittstelle erhalten kann, und die Direktive kann nicht als Abhängigkeitsinjektion verwendet werden. Ich hoffe, Sie können sie angeben mir einen Rat.

Answer 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 };

Answer 2

可以使用AngularJS-Toaster
https://github.com/jirikavi/A...

Answer 3

楼上说的angularjs-toaster挺好用的，可以用用。或者写个service，通过di来使用。

Answer 4

之前用过sweet alert，感觉也还行。
http://t4t5.github.io/sweetal...