angulars的初次学习篇之toaster

本文详细介绍了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">

         <button ng-click="pop()"><button>

          </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"

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值