javascript - angularjs Saya ingin menulis roti bakar mudah, bagaimana untuk melaksanakannya?

Question

Ideanya adalah untuk menggunakan arahan untuk melaksanakannya, tetapi saya tersekat dan tidak tahu cara untuk mendedahkan API kepada pengawal

Saya mahu memanggil API dalam pengawal apabila roti bakar muncul xxx.showToast, tetapi saya tidak tahu bagaimana untuk mendapatkan antara muka ini, dan arahan itu tidak boleh digunakan sebagai suntikan pergantungan saya harap anda boleh berikan saya nasihat.

Answer 1

Anda hanya boleh mengambil arahan dan menulisnya dan menggunakannya secara terus

kod css

.kotak roti bakar{

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;

}
.kotak-toast .item-toast{

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

}

kod arahan

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

        });
    }
};

});

fungsi getToastClass(jenis) {

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

}

penggunaan html

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

Penggunaan pengawal

$scope.toast = { teks: "Hellow", jenis: 1, tamat masa: 1000, maks:2 };

Answer 2

Anda boleh menggunakan AngularJS-Toaster
https://github.com/jirikavi/A...

Answer 3

Angularjs-toaster yang dinyatakan di atas sangat mudah digunakan dan boleh digunakan. Atau tulis perkhidmatan dan gunakannya melalui di.

Answer 4

Saya telah menggunakan sweet alert sebelum ini dan nampaknya ok.
http://t4t5.github.io/sweetal...