Angular JS Toaster is an Angular JS prompt box. Based on angular v1.2.6 and above and angular-animate. (Recommended use / 1.2.8/angular-animate.js, because the high version will have weird flicker.)
Import scripts

<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.16/toaster.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>
<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.16/toaster.min.js"></script>

Usage 1:
Add instruction

<toaster-container></toaster-container>

Writing Bullet Window Call Function

angular.module('main', ['toaster', 'ngAnimate'])
    .controller('myController', function($scope, toaster) {
        $scope.pop = function(){
            toaster.pop('success', "title", "text");
        };
    });

call

<div ng-controller="myController">
    <button ng-click="pop()">Show a Toaster</button>
</div>

Add Close Button
Way 1: Global, add all bullet windows

<toaster-container toaster-options="{'close-button': true}"></toaster-container>

Mode 2: Pass an object to the close-btn attribute

 <toaster-container toaster-options="{'close-button':{ 'toast-warning': true, 'toast-error': false } }"></toaster-container>

Bullet window display closing button for warning type, error type is not displayed, and false is not displayed by default
Mode 3: Inside the controller:

toaster.pop({
            type: 'error',
            title: 'Title text',
            body: 'Body text',
            showCloseButton: true
         });

This setting overrides the property settings of the page and does not pollute other pop-up windows.
Customize the html of the close button

<toaster-container toaster-options="{'close-html':'<button>Close</button>', 'showCloseButton':true}"></toaster-container>

perhaps

toaster.pop({
        type: 'error',
        title: 'Title text',
        body: 'Body text',
        showCloseButton: true,
        closeHtml: '<button>Close</button>'
});

Body Output Type (body rendering type) can accept trusted Html,'template','template WithData','directive'four types
Trusted Html: Using this type of toaster calls $sce.trustAsHtml(toast.body) and if parsing succeeds, it will be bound to toaster through ng-bind-html instructions. Failure throws an exception.
Processing as a template
For example:

$scope.pop = function(){
        toaster.pop({
            type: 'error',
            title: 'Title text',
            body: 'cont.html',
            showCloseButton: true,
            bodyOutputType:'template',
            closeHtml: '<span>wqeqwe</span>'
        });
    };

Processing as an instruction

toaster.pop({
    type: 'info',
    body: 'bind-unsafe-html',
    bodyOutputType: 'directive'
});

.directive('bindUnsafeHtml', [function () {
    return {
        template: "<span style='color:orange'>Orange directive text!</span>"
    };
}])

Instructions with data

toaster.pop({
        type: 'info',
        body: 'bind-name',
        bodyOutputType: 'directive',
        directiveData: { name: 'Bob' }
});

.directive('bindName', [function () {
      return {
          template: "<span style='color:orange'>Hi {{directiveData.name}}!</span>"
      };
}])

<toaster-container toaster-options="{'body-output-type': 'template'}"></toaster-container>

Callback function, called when the window is removed, can be used to call the window chain

toaster.pop({
            title: 'A toast',
            body: 'with a callback',
            onHideCallback: function () { 
                toaster.pop({
                    title: 'A toast',
                    body: 'invoked as a callback'
                });
            }
});

Setting the position of the bullet window
Location information can go to the css file to see where it needs to be, directly change the attribute value to the corresponding class, if not, add a toaster.css file manually and then assign the name to the attribute.

<toaster-container toaster-options="{'position-class': 'toast-top-full-width'}"></toaster-container>

<toaster-container toaster-options="{'position-class': 'toast-top-center', 'close-button':true}"></toaster-container>