AngularJSには様々なライブラリがありますが、今日はその中の１つであるtoasterについてです。日本語でtoasterのこと書いてる人が全然居ないのですが、あまり知られていないのかな？

jirikavi/AngularJS-Toaster

DEMO

公式にサンプルがあるので、これを見れば十分です。

popメソッドの第一引数が文字列なので、いつもここで迷います。以下の部分だけ覚えておけば使い方はOKですね。

toaster.pop('success', "title", 'Its address is https://google.com.', 15000, 'trustedHtml', 'goToLink');
toaster.pop('success', "title", '<ul><li>Render html</li></ul>', 5000, 'trustedHtml');
toaster.pop('error', "title", '<ul><li>Render html</li></ul>', null, 'trustedHtml');
toaster.pop('wait', "title", null, null, 'template');
toaster.pop('warning', "title", "myTemplate.html", null, 'template');
toaster.pop('note', "title", "text");

コードを見ると、this.pop = function (type, title, body, timeout, bodyOutputType, clickHandler) {というようになっています。コールバックもあるようなのでクリックしたら通知内容の詳細に飛ぶとかも可能ですね。

rustedHtmlなどがあるように、XSS対策が考慮されています。セキュリティ面も安心かと思います。

通知内容を通知する場所はtoast-containerタグです。angularをroutingありでやっている場合にはng-viewを持っているindex.htmlあたりに書いておけばOKです。それでも表示されない場合はz-indexの問題かと思いますので、適宜調整してください。

皆さんも使ってみてはいかがでしょうか！