AngularJS Toaster是一個 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate. (推薦使用 /1.2.8/angular-animate.js, 因為高版本會有怪異閃爍.)

引入腳本

<link  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>

用法1：

添加指令

<toaster-container></toaster-container>

編寫彈窗調用函數

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

調用

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

添加關閉按鈕

方式一： 全局的，為所有彈窗添加

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

方式二：給close-btn 屬性傳遞一個對象

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

表示warning類型的彈窗顯示關閉按鈕，error類型的則不顯示，不設置默認為false不顯示

方式三 ：在控制器里面設置：

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

這種設置會覆蓋頁面的屬性設置，不會污染其他的彈窗設置。

自定義關閉按鈕的html

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

或者

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

bodyOutputType（body的渲染類型） 可以接受 trustedHtml', ‘template', ‘templateWithData', ‘directive'四種類型
trustedHtml：使用此類型 toaster會調用$sce.trustAsHtml(toast.body)如果解析成功將會通過ng-bind-html指令被綁定到toaster，失敗會拋出一個異常

作為模板處理

例如：

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