angulars的初次学习篇之toaster

最新推荐文章于 2024-09-07 09:01:20 发布

mrhuanhuan

最新推荐文章于 2024-09-07 09:01:20 发布

阅读量703

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mrhuanhuan/article/details/84323878

本文详细介绍了AngularJS的Toaster组件，一种基于AngularJS和Angular-animate的提示框解决方案。文章提供了如何引入Toaster组件的脚本，展示了添加指令、编写弹框调用函数的方法，并解释了如何通过不同方式添加关闭按钮来增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.toaster是angulars的提示框，这个提示框是基于angularjs和angular-animate之上的。

引入脚本
<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>

用法一

添加指令：

<toaster-container></toaster-container>

编写弹框调用函数

angular.module('main',['toaster','ngAnimate'])

.controller("myController",function （$scope,toaster） {

$scope.pop=function () {

toaster.pop('sucess',"title","text")

}

})

调用：<div ng-controller="myController">

</div>

添加关闭按钮

方式一：全局的，为所有的弹框添加，<toaster-container toaster-options="{'close-button' : true}"></toaster-container>

方式二:给close-button属性传递一个对象，<toaster-container toaster-options="{'close-button' : {toast-wanring : true,toast-error : false} }"></toaster-container>表示wanring类型的弹框显示按钮，error类型的不显示。默认为false为不显示。

方式三：在控制器里面设置，toaster.pop（{

type : "error",

title : "ttitle text",

body : "body text",

showCloseButton : "true"

}）这种设置可能影响页面中的属性设置，但是不会影响其他弹框的属性