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"
})这种设置可能影响页面中的属性设置,但是不会影响其他弹框的属性