AngularJS Toaster使用详解


Posted in Javascript onFebruary 24, 2017

AngularJS Toaster是一个 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate. (推荐使用 /1.2.8/angular-animate.js, 因为高版本会有怪异闪烁.)

引入脚本

<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.16/toaster.min.css" 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>'
  });
 };

作为指令来处理

toaster.pop({
 type: 'info',
 body: 'bind-unsafe-html',
 bodyOutputType: 'directive'
});
.directive('bindUnsafeHtml', [function () {
 return {
  template: "<span style='color:orange'>Orange directive text!</span>"
 };
}])

带数据的指令

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

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

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

以上所述是小编给大家介绍的AngularJS Toaster使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
javascript打印输出json实例
Nov 11 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
JS截取字符串实例详解
Nov 24 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 Javascript
js获取隐藏元素的宽高
Feb 24 #Javascript
js css自定义分页效果
Feb 24 #Javascript
jQuery快速高效制作网页交互特效
Feb 24 #Javascript
Angular.js自定义指令学习笔记实例
Feb 24 #Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 #Javascript
JavaScript和jQuery制作光棒效果
Feb 24 #Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 #Javascript
You might like
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
YII框架http缓存操作示例
2019/04/29 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
影视艺术学院毕业生自荐信
2013/11/13 职场文书
英文导游欢迎词
2014/01/11 职场文书
中学家长会邀请函
2014/01/17 职场文书
《雪儿》教学反思
2014/04/17 职场文书
汽车广告策划方案
2014/05/31 职场文书
2014离婚协议书范文
2014/09/10 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
违纪学生保证书
2015/02/27 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python