AngularJS Toaster

AngularJS Toaster

• 1 使用
  • 1.1 源码
  • 1.1 引入脚本
  • 1.2 用法
    • 添加指令
    • demo
    • 日常使用方式
  • 添加关闭按钮以及设置弹窗位置
• 他山之石

1 使用

1.1 源码

AngularJS-Toaster 源码

1.1 引入脚本

文件：static/js/config.lazyload.js

static/vendor/angular/angularjs-toaster/toaster.js
static/vendor/angular/angularjs-toaster/toaster.css

文件：templates/index.html

static/vendor/angular/angular-animate/angular-animate.js
ps:angular-animate 动画相关

1.2 用法

添加指令

<toaster-container></toaster-container>

自定义指令

此指令添加到 html 文件中

demo

编写弹窗调用函数

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>

日常通过一个按钮触发一个消息框的场景还是很少的，更多的是页面请求失败以及其他需要提示用户的场景的时候需要

日常使用方式

$scope.pop = function(type,title,text){
    toaster.pop(type,'',text);
};

// 使用
if ($scope.totalServerItems == '0') {
    $scope.pop('error', '', '未查询到数据');
}

if(status == 'SUCCESS') {
    $scope.pop('success', '', '修改菜单信息成功');
}

添加关闭按钮以及设置弹窗位置

---- 此处部分可以查看他山之石

他山之石

https://www.jb51.net/article/106617.htm