Toaster如何在AngularJS中使用-创新互联
本篇文章给大家分享的是有关Toaster如何在AngularJS中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联成立于2013年,先为孟连等服务建站,孟连等地企业,进行企业商务咨询服务。为孟连企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。引入脚本
用法1:
添加指令
编写弹窗调用函数
angular.module('main', ['toaster', 'ngAnimate']) .controller('myController', function($scope, toaster) { $scope.pop = function(){ toaster.pop('success', "title", "text"); }; });
调用
添加关闭按钮
方式一: 全局的,为所有弹窗添加
方式二:给close-btn 属性传递一个对象
表示warning类型的弹窗显示关闭按钮,error类型的则不显示,不设置默认为false不显示
方式三 :在控制器里面设置:
toaster.pop({ type: 'error', title: 'Title text', body: 'Body text', showCloseButton: true });
这种设置会覆盖页面的属性设置,不会污染其他的弹窗设置。
自定义关闭按钮的html
Close', 'showCloseButton':true}">
或者
toaster.pop({ type: 'error', title: 'Title text', body: 'Body text', showCloseButton: true, closeHtml: '' });
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: 'wqeqwe'
});
};
作为指令来处理
toaster.pop({ type: 'info', body: 'bind-unsafe-html', bodyOutputType: 'directive' });
.directive('bindUnsafeHtml', [function () {
return {
template: "Orange directive text!"
};
}])
带数据的指令
toaster.pop({ type: 'info', body: 'bind-name', bodyOutputType: 'directive', directiveData: { name: 'Bob' } }); .directive('bindName', [function () { return { template: "Hi {{directiveData.name}}!" }; }])
回调函数,当弹窗被移除的时候调用,可以用于链式调用弹窗
toaster.pop({ title: 'A toast', body: 'with a callback', onHideCallback: function () { toaster.pop({ title: 'A toast', body: 'invoked as a callback' }); } });
设置弹窗位置
位置信息可以去css文件里面看需要什么位置,直接把属性值改成相应class就行,如果没有符合的就自己手动添加一个到toaster.css文件然后把名字赋值给属性就行
以上就是Toaster如何在AngularJS中使用,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联网站建设公司行业资讯频道。
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享题目:Toaster如何在AngularJS中使用-创新互联
分享地址:http://scyanting.com/article/hieoh.html