2016年4月8日 星期五

AngularJS ngNotify 套件

必要條件

  • IE9+
  • AngularJS
  • 不需要JQuery

安裝指令

bower install ng-notify --save
npm install ng-notify --save

CDN

http://cdn.jsdelivr.net/angular.ng-notify/0.8.0/ng-notify.min.js
http://cdn.jsdelivr.net/angular.ng-notify/0.8.0/ng-notify.min.css

用法

app.js
(function () {
    // 載入模組
    angular
        .module('myApp', ['ngNotify'])
        .run(ngNotifyConfig);

    // 全域設定
    ngNotifyConfig.$inject = ["ngNotify"];
    function ngNotifyConfig(ngNotify) {
        ngNotify.config({
            theme: 'pure',
            position: 'bottom',
            duration: 3000,
            type: 'info',
            sticky: false,
            button: true,
            html: false
        });
    }
})();
IndexController.js
(function () {
    angular
        .module("myApp")
        .controller("IndexController", IndexController);

    IndexController.$inject = ["ngNotify"];
    function IndexController(ngNotify) {
        var vm = this;

        // 通知1
        vm.Notify1 = function () {
            // 呼叫set函式來Notify, 預設為info type
            ngNotify.set('Your notification message goes here!');
        }

        // 通知2
        vm.Notify2 = function () {
            // 可用第二個參數來指定Notify Type
            ngNotify.set('Your error message goes here!', 'error');
        }

        // 呼叫時使用額外的設定值
        vm.Notify3 = function () {
            // 獨立設定值
            ngNotify.set("Your individual message.", {
                theme: 'pure',
                position: 'bottom',
                duration: 3000,
                type: 'info',
                sticky: false,
                button: false,
                html: true
            });

        }

        // 關閉通知時呼叫call back函式    
        vm.NotifyCallBack = function () {
            var callback = function () { };
            // 第三個參數為call back函式
            ngNotify.set('This message has a callback.', {}, callback);
        }

        // 自訂顯示通知的容器
        vm.NotifyTarget = function () {
            ngNotify.set('This message has a specific container!', {
                target: '#new-container'
            });
        }

        // 關閉通知
        vm.CloseNotify = function () {
            ngNotify.dismiss();
        }


    }
})();

設定值

  • theme: string - 指定使用樣式
    • pure(default)
    • prime
    • pastel
    • pitchy
  • type: string - 通知類別
    • info(default)
    • error
    • success
    • warn
    • grimace
  • position: string - 顯示的位置
    • bottm(default)
    • top
  • duration: int - 顯示通知的持續時間毫秒數
  • sticky: bool - 是否持續顯示, 預設為false, 設為true時將不理會duration設定值
  • button: bool - 是否顯示關閉按鈕, 預設為true
  • target: string - 用來指定要顯示通知的容器名稱
  • html: bool - 需要引用angular-sanitize模組才能生效html格式的提示訊息

函式定義

  • set(message, type|config, callback)
    • 呼叫提示訊息
  • config(options)
    • 設定參數
  • dismiss()
    • 手動關閉通知, 當sticky設為true且button設為false時使用
  • addType(name, class)
    • 自訂通知類別
  • addTheme(name, class)
    • 自訂顯示樣式

相關連結

ng-notify Live Demo
ng-notify GitHub