大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇文章给大家分享的是有关Toaster如何在AngularJS中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
成都创新互联长期为1000多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为永泰企业提供专业的网站设计制作、网站制作,永泰网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
引入脚本
用法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中使用,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。