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 Event学习第六章 事件的访问
Feb 07 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
JavaScript中DOM详解
Apr 13 Javascript
AngularJS表单基本操作
Jan 09 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
javaScript中的空值和假值
Dec 18 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
小程序如何获取多个formId实现详解
Sep 20 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
WordPress判断用户是否登录的代码
2011/03/17 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
python学习入门细节知识点
2018/03/29 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
销售主管岗位职责
2014/02/08 职场文书
企业员工培训感言
2014/02/26 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
销售经理工作检讨书
2015/02/19 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书