AngularJS Toaster使用详解
AngularJSToaster是一个AngularJS提示框.基于angularv1.2.6及以上和angular-animate.(推荐使用/1.2.8/angular-animate.js,因为高版本会有怪异闪烁.)
引入脚本
<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");
};
});
调用
<divng-controller="myController"> <buttonng-click="pop()">ShowaToaster</button> </div>
添加关闭按钮
方式一：全局的，为所有弹窗添加
<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>
以上所述是小编给大家介绍的AngularJSToaster使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！