介绍
ng-notifier 是一个 AngularJS 模块，用于在应用程序中显示通知消息。它支持两种样式的通知，一种是常规通知，另一种是进度通知。ng-notifier 可以被视为一个基于 Toastr 的简化版本，它过滤了 Toastr 的高级功能，更简单地实现了类似的功能。
特性
- 显示不同类型的通知消息，包括成功、警告、错误和信息。
- 支持自定义消息标题和内容。
- 支持自定义通知样式，包括位置、类型和图标。
- 支持进度通知。
安装
可以通过 npm 安装 ng-notifier：
npm install ng-notifier --save
或者，你可以从 GitHub 上获取源代码并手动引入它。
快速上手
在 HTML 中引入 ng-notifier：
<link rel="stylesheet" href="path/to/ng-notifier.min.css"> <script src="path/to/ng-notifier.min.js"></script>
确保你已经在你的 AngularJS 应用程序中包含了 ng-notifier：
angular.module('myApp', ['ngNoty']);在控制器中使用通知：
angular.module('myApp').controller('MyController', function($rootScope, $scope, notifier) {
$scope.showSuccessNotification = function() {
notifier.success('Success', 'Your operation was completed successfully!');
};
});通知类型
ng-notifier 支持四种类型的通知：
- 成功（success）: 显示成功消息，绿色背景。
- 警告（warning）: 显示警告消息，黄色背景。
- 错误（error）: 显示错误消息，红色背景。
- 信息（info）: 显示信息消息，蓝色背景。
自定义样式
你可以通过以下可选参数来自定义通知消息的样式：
- position: 消息出现的位置。默认在屏幕右上角，可选值有 topLeft、topRight、bottomLeft 和 bottomRight。
- timeout: 自动关闭通知的时间（以毫秒为单位）。默认为 3000 毫秒，也可以设置成 0 来禁用自动关闭。
- type: 消息类型。默认是 info，也支持 success、warning 和 error。
- icon: 消息图标。默认是一个细长的 exclamation 样式的图标（黄色色调）。
以下是自定义样式示例：
notifier.success('Success', 'Your operation was completed successfully!', {
position: 'bottomRight',
timeout: 5000,
type: 'success',
icon: 'fa-check-circle'
});进度通知
ng-notifier 还支持进度通知，可以像一般的通知一样使用。进度通知是一个长期存在的通知，可以在通知的消息内容中包含进度条。
使用进度通知的示例：
notifier.progress('Processing', 'Your operation is in progress...', {
position: 'topRight',
timeout: 0, // disable auto close
progressBar: true
});如果需要更新进度条，只需调用 updateProgress() 方法：
notifier.updateProgress($scope.progressValue);
结论
ng-notifier 提供了 AngularJS 应用程序中简单易用的通知消息功能。它支持各种类型的消息，可以自定义消息样式，还支持进度通知。如果你正在构建一个 AngularJS 应用程序，可以考虑使用 ng-notifier 来显示通知消息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005579581e8991b448d494f