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作用域与作用域链深入解析
Dec 06 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 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 GD 图像处理组件的常用函数总结
2010/04/28 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
python检测服务器是否正常
2014/02/16 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Python requests模块实例用法
2019/02/11 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Django视图、传参和forms验证操作
2020/07/15 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
计算机专业自荐信
2013/10/14 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python