angularjs 想写一个简单的toast，如何实现？

Question

思路是使用directive来实现，但卡在不知道怎么暴露API给controller

我想弹出toast的时候在controller里调用API xxx.showToast,但不知道怎么才能取到这个接口，directive也不能作为依赖注入，卡在这里了，望指教。

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 = $('<div class="toast-box toast-' + position + '"></div>').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("div").length >= (value.max || objSample.max)
                    if (isMax) return;
                    //var item = $('<div class="toast-item toast-' + getToastClass(value.type) + ' animated fadeInDown">' + value.text + '</div><br/>').appendTo(box);
                    var item = $('<div class="toast-item toast-' + getToastClass(value.type) + '">' + value.text + '</div><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...

Answer 5

这是一个angularjs1开发的项目，里面有toast插件的封装，可以参考一下项目地址

具体路径在 public/dist/js/plugins/toast/
其中toast用directive实现

(function() {
    'use strict';

    angular
        .module('app.plugins.toast')
        .directive('toast', toast);

    toast.$inject = [
        'plugins.toast.service',
    ];

    function toast(toastService) {

        var directive = {
            restrict: 'EA',
            templateUrl: '/dist/js/plugins/toast/toast.html',
            scope: {},
            link: link
        };

        return directive;

        function link(scope) {
            scope.toast = toastService;
        }
    }

})();

用service跟controller交换数据

(function () {
    'use strict';
    angular.module('app.plugins.toast')
        .factory('plugins.toast.service', toast);

    toast.$inject = [
        '$timeout'
    ];

    function toast($timeout) {
        var toasts = [];
        var service = {
            types: {},
            add: add,
            get: get,
            // cancel: cancel,
            // clearAll: clearAll,
            // clearErrors: clearErrors,
            // clearSuccesses: clearSuccesses
        };
        service.types = {
            warning: '警告',
            info: '信息',
            success: '成功',
            error: '错误'
        };

        return service;

        function get() {
            return toasts;
        }

        function add(type, msg) {
            var toastIcon = {
                warning: 'fa-exclamation-circle',
                info: 'fa-info-circle',
                success: 'fa-check-circle',
                error: 'fa-exclamation-circle'
            };
            var toast = {
                type: type,
                typeMsg: service.types[type],
                msg: msg,
                cancel: cancel,
                toastIcon: toastIcon[type],
                remainSecond: 3 // 展示的时间
            };
            if (type == 'success') {
                autoDestroy(toast);
            }
            toasts.push(toast);
        }

        function autoDestroy(toast) {
            $timeout(function dismiss() {
                var index = toasts.indexOf(toast);
                if (index > -1) {
                    cancel(index);
                }
            }, 3000);
        }

        /**
         * [cancel Remove a single toast.]
         * @param  {[type]} index [description]
         * @return {[type]}       [description]
         */
        function cancel(index) {
            toasts.splice(index, 1);
        }

    }

})();