@66pix/angular-ui-notification 中文文档教程

Question

angular-ui-notification

Angular.js 服务提供简单的通知，使用 Bootstrap 3 样式和动画的 css 转换

Features

• No dependencies except of angular.js.
• CSS3 Animations.
• Small size.
• 5 message types.
• Use HTML in your messages.
• Configure options globally py the provider
• Use custom options by the message
• Use custom template

Install

要使用 bower 安装包并保存为依赖项，请使用...

bower install angular-ui-notification --save

要通过 NPM 安装：

npm install angular-ui-notification --save

Usage

Heres a plunker demo

在你的 html/template add

...
  <link rel="stylesheet" href="angular-ui-notification.min.css">
...
  <script src="angular-ui-notification.min.js"></script>
...

在你的应用程序中，像这样声明依赖注入..

  angular.module('notificationTest', ['ui-notification']);
...

你可以通过配置模块提供者

angular.module('notificationTest', ['ui-notification'])
    .config(function(NotificationProvider) {
        NotificationProvider.setOptions({
            delay: 10000,
            startTop: 20,
            startRight: 10,
            verticalSpacing: 20,
            horizontalSpacing: 20,
            positionX: 'left',
            positionY: 'bottom'
        });
    });
...

当你需要显示通知时，注入服务并调用它！

angular.module('notificationTest').controller('notificationController', function($scope, Notification) {

  Notification.primary('Primary notification');
  // or simply..
  Notification('Primary notification');

  // Other Options
  // Success
  Notification.success('Success notification');

  // Message with custom type
  Notification({message: 'Warning notification'}, 'warning');

  // With Title
  Notification({message: 'Primary notification', title: 'Primary notification'});

  // Message with custom delay
  Notification.error({message: 'Error notification 1s', delay: 1000});

  // Embed HTML within your message.....
  Notification.success({message: 'Success notification<br>Some other <b>content</b><br><a href="https://github.com/alexcrack/angular-ui-notification">This is a link</a><br><img src="https://angularjs.org/img/AngularJS-small.png">', title: 'Html content'});

  // Change position notification
  Notification.error({message: 'Error Bottom Right', positionY: 'bottom', positionX: 'right'});

  // Replace message
  Notification.error({message: 'Error notification 1s', replaceMessage: true});
}

Service

模块名称：“ui-notification”

服务：“Notification”

配置提供者：“NotificationProvider”

Options

选项可以全局传递给配置提供者或在当前消息中使用。

选项列表：

Option	Possible values	Default value	Description
delay	Any integer value	5000	The time in ms the message is showing before start fading out
startTop	Any integer value	10	Vertical padding between messages and vertical border of the browser
startRight	Any integer value	10	Horizontal padding between messages and horizontal border of the browser
verticalSpacing	Any integer value	10	Vertical spacing between messages
horizontalSpacing	Any integer value	10	Horizontal spacing between messages
positionX	"right", "left", "center"	"right"	Horizontal position of the message
positionY	"top", "bottom"	"top"	Vertical position of the message
replaceMessage	true, false	false	If true every next appearing message replace old messages
templateUrl	Any string	"angular-ui-notification.html"	Custom template filename (URL)
onClose	Any function	undefined	Callback to execute when a notification element is closed. Callback receives the element as its argument.
closeOnClick	true, false	true	If true, messages are closed on click
maxCount	Any integer	0	Show only [maxCount] last messages. Old messages will be killed. 0 - do not kill

您也可以传递“scope”选项。 这是一个角度范围选项，通知范围将从中继承。 此选项只能在方法中传递。 默认值为 $rootScope

Methods

Notification service methods

Method name	Description
Notification(), Notification.primary()	Show the message with bootstrap's primary class
Notification.info()	Show the message with bootstrap's info class
Notification.success()	Show the message with bootstrap's success class
Notification.warning()	Show the message with bootstrap's warn class
Notification.error()	Show the message with bootstrap's danger class
Notification.clearAll()	Remove all shown messages

Notification service options

Option	Possible values	Default value	Description
title	String	""	Title to appear at the top of the notification
message	String	""	Message to appear in the notification
templateUrl	String	"angular-ui-notification.html"	URL of template to be used for notification
delay	Int (?)	5000 or configured global delay	Number of ms before notification fades out. If not an integer, notification will persist until killed.
type	"primary", "info", "success", "warning", "error"	"primary"	Bootstrap flavoring
positionY	"top", "bottom"	"top"
positionX	"right", "left", "center"	`"right"
replaceMessage	Boolean	false	If true this message will replace old(er) message(s)
closeOnClick	true, false	true	If true, the message is closed on click

Returning value

每个“显示”方法都返回一个承诺，该承诺使用这些方法解析通知范围：

Method name	Description
notificationScope.kill(isHard)	Remove the specific message isHard - if false or omitted kill message with fadeout effect (default). If true - immediately remove the message

Custom Templates

可以提供自定义模板。

<div class="ui-notification">
    <h3 ng-show="title" ng-bind-html="title"></h3>
    <div class="message" ng-bind-html="message"></div>
</div>

默认的现有范围值是“title”——消息的标题和“message”。 也可以使用任何自定义范围的属性。