官网：http://janstevens.github.io/angular-growl-2/
github地址：https://github.com/JanStevens/angular-growl-2
1bower install angular-growl --save
2.依赖注入angular.module('testApp', ['angular-growl'])
.关于angular-growl提示语用在国际化（只要项目``中引入angular-translate）
automatic translation of messages if angular-translate filter is present, you only have to provide keys as messages, angular-translate will translate them
growl.error("",{ translateMessage: true }, config);
使用方式和过程
依赖注入angular.module('testApp', ['angular-growl'])
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="angular.min.js"></script>
<link href="angular-growl.css" rel="stylesheet">
<script src="angular-growl.js"></script>
</head>
<body>
<div growl></div>
</body>
</html>
app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
$scope.addSpecialWarnMessage = function() {
growl.warning("This adds a warn message");
growl.info("This adds a info message");
growl.success("This adds a success message");
growl.error("This adds a error message");
}
}]);
设置提示语言时间
var demoBasic = angular.module('demoBasic', ['angular-growl', 'ngAnimate']);
demoBasic.config(['growlProvider', function (growlProvider) {
growlProvider.globalTimeToLive({success: 1000, error: 2000, warning: 3000, info: 4000});
}]);
demoBasic.controller('basicDemoCtrl', ['$scope', 'growl',
function($scope, growl) {
$scope.basicUsage = function (type) {
var config = {};
switch (type) {
case "success":
growl.success("<b>I'm</b> a success message and not unique", config);
break;
case "info":
growl.info("I'm an info message", config);
break;
case "warning":
growl.warning("I'm the warning message", config);
break;
case "custom":
growl.success("Custom TTL of 10s", {ttl: 10000});
break;
case "closing":
growl.warning("I will not close!", {ttl: -1});
break;
default:
growl.error("Ups, error message here!", config);
}
};
}]);
或者
demoBasic.controller('basicDemoCtrl', ['$scope', 'growl',
function($scope, growl) {
var config = {ttl: 4000};
growl.error("<span>{{'Login-html.formcontent.errorlogin' | translate}}</span>",{ translateMessage: true }, config);
})