demo: http://cheiron1990.github.io/angular-notify/demo.html
1 引入样式表,墙内自己解决一下Google字体 -_-||| ,第二个是根据不同的主题,可以是angular-notify-texture, angular-notify-material, angular-notify-flat, angular-notify-bordered:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles/css/angular-notify-texture.min.css" id="notifyTheme">
2 在jQuery和Angular之后引入js文件:
<script src="scripts/dist/angular-notify.min.js"></script>
3 在你的Angular App中引入模块:
angular.module('yourApp', ['angularNotify']);
4 在HTML中添加通知容器:
<div notifybar style="position:absolute;top:0;right:0"></div>
5 需要显示通知时触发事件,传入一个对象,包括type ( 可选的值:'success', 'info', 'warning', 'error' ), title 和可选的content:
var notify = {
type: 'success',
title: 'Create Item Successful!',
content: 'Item ( id: 2031 ) has already added to the list.',
timeout: 3200 //timeout default is 3200 ms you can change as you need
};
$scope.$emit('notify', notify);
1 Import stylesheets. The different theme files are angular-notify-texture, angular-notify-material, angular-notify-flat and angular-notify-bordered:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles/css/angular-notify-texture.min.css" id="notifyTheme">
2 Import the js file after jQuery and AngularJS:
<script src="scripts/dist/angular-notify.min.js"></script>
3 Import the module in your Angular App:
angular.module('yourApp', ['angularNotify']);
4 Add a container into the html file:
<div notifybar style="position:absolute;top:0;right:0"></div>
5 When you want to display a notify, trigger a notify event, and pass an object as argument, this object should contain a type parameter(the value must be one of: 'success', 'info', 'warning', 'error'), a title parameter and an optional content and timeout parameter:
var notify = {
type: 'success',
title: 'Create Item Successful!',
content: 'Item ( id: 2031 ) has already added to the list.',
timeout: 5000 //time in ms
};
$scope.$emit('notify', notify);