引入脚本

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.16/toaster.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script><scriptsrc="https://code.angularjs.org/1.2.0/angular-animate.min.js"></script><scriptsrc="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");};});

调用

<png-controller="myController"><buttonng-click="pop()">ShowaToaster</button></p>

添加关闭按钮

方式一: 全局的,为所有弹窗添加

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

方式二:给close-btn 属性传递一个对象

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

表示warning类型的弹窗显示关闭按钮,error类型的则不显示,不设置默认为false不显示

方式三 :在控制器里面设置:

toaster.pop({type:'error',title:'Titletext',body:'Bodytext',showCloseButton:true});

这种设置会覆盖页面的属性设置,不会污染其他的弹窗设置。

自定义关闭按钮的html

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

或者

toaster.pop({type:'error',title:'Titletext',body:'Bodytext',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:'Titletext',body:'cont.html',showCloseButton:true,bodyOutputType:'template',closeHtml:'<span>wqeqwe</span>'});};

作为指令来处理

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

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

带数据的指令

toaster.pop({type:'info',body:'bind-name',bodyOutputType:'directive',directiveData:{name:'Bob'}});.directive('bindName',[function(){return{template:"<spanstyle='color:orange'>Hi{{directiveData.name}}!</span>"};}])<toaster-containertoaster-options="{'body-output-type':'template'}"></toaster-container>

回调函数,当弹窗被移除的时候调用,可以用于链式调用弹窗

toaster.pop({title:'Atoast',body:'withacallback',onHideCallback:function(){toaster.pop({title:'Atoast',body:'invokedasacallback'});}});

设置弹窗位置

位置信息可以去css文件里面看需要什么位置,直接把属性值改成相应class就行,如果没有符合的就自己手动添加一个到toaster.css文件然后把名字赋值给属性就行

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