angular-flash-alert

<!DOCTYPE html> <html ng-app="demoApp"> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="description" content="Angular-flash : Flash message for angularjs"> <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css"> <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css"> <link rel="stylesheet" type="text/css" href="stylesheets/prettify.css"> <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico"> <link rel="stylesheet" type="text/css" href="../src/angular-flash.css"> <title>Angular-flash</title> </head> <body ng-controller="FlashDemoCtrl">  <div id="header_wrap" class="outer"> <header class="inner"> <a id="forkme_banner" href="https://github.com/sachinchoolur/angular-flash">View on GitHub</a> <h1 id="project_title">Angular-flash</h1> <h2 id="project_tagline">Flash message for AngularJS and Bootstrap.</h2> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://sachinchoolur.github.io/angular-flash/" data-text="Flash message for #AngularJS" data-via="sachinchoolur" data-count="none" data-hashtags="javascript">Tweet</a> <script>!function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script> <a href="https://twitter.com/sachinchoolur" class="twitter-follow-button" data-show-count="false">Follow @sachinchoolur</a> <script>!function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script> <iframe src="https://ghbtns.com/github-btn.html?user=sachinchoolur&repo=angular-flash&type=star" frameborder="0" scrolling="0" width="170px" height="20px"></iframe> <section id="downloads"> <a class="zip_download_link" href="https://github.com/sachinchoolur/angular-flash/zipball/master">Download this project as a .zip file</a> <a class="tar_download_link" href="https://github.com/sachinchoolur/angular-flash/tarball/master">Download this project as a tar.gz file</a> </section> </header> </div>  <div id="main_content_wrap" class="outer"> <section id="main_content" class="inner"> <div class="section"> <h3><a id="demo" class="anchor" href="#demo" aria-hidden="true"><span class="octicon octicon-link"></span></a>Demo</h3> <p>Flash message for AngularJS and Bootstrap.</p> <flash-message duration="5000" show-close="true" on-dismiss="myCallback(flash);"></flash-message> <button class="btn btn-success" ng-click="success()">Success</button> <button class="btn btn-info" ng-click="info()">Info</button> <button class="btn btn-warning" ng-click="warning()">Warning</button> <button class="btn btn-danger" ng-click="danger()">Danger</button> </div> <div class="section"> <h3><a id="demo" class="anchor" href="#demo" aria-hidden="true"><span class="octicon octicon-link"></span></a>Another Demo</h3> <div class="listDemoCont"> <ul class="listDemo"> <li ng-repeat="list in lists | orderBy:'createdOn'"> <div class="listCont"> {{list.content}} <span class="action"> <a href="" ng-click="delete(list)">Delete</a> </span> </div> </li> <div class="newList"> <div class="listAddCont"> <input id="newList" placeholder="Add new list" autofocus class="form-control" type="text" ng-model="newList"> <span class="action"> <a href="" ng-disabled="!newList.length" ng-click="add(newList);">add</a> </span> </div> </div> </ul> </div> </div> <div class="section"> <h3> <a id="install" class="anchor" href="#install" aria-hidden="true"><span class="octicon octicon-link"></span></a>Install angular-flash</h3> <p>Add the following code to the <head> of your document.</p> <pre class="prettyprint linenums"> <link type="text/css" rel="stylesheet" href="dist/angular-flash.min.css" /> // If you are using bootstrap v3 no need to include angular-flash.min.css <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="dist/angular-flash.min.js"></script> // Do not include both angular-flash.js and angular-flash.min.js </pre> <p>Add <span class="atv">ngFlash</span> dependency to your module</p> <pre class="prettyprint linenums"> var myApp = angular.module("app", ["ngFlash"]);</pre> <p>Include <span style="font-size:13px;"><span class="atn">flash-message</span></span> directive in your HTML.</p> <pre class="prettyprint linenums"> <flash-message></flash-message></pre> </div> <div class="section"> <h3> <a id="configure" class="anchor" href="#configure" aria-hidden="true"><span class="octicon octicon-link"></span></a>Configure</h3> <p>You can configure angular-flash by two ways:</p> <p>Add attributes on the <i><flash-message></i> directive.</p> <pre class="prettyprint linenums"> <flash-message duration="5000" show-close="true" on-dismiss="myCallback(flash)" ></flash-message> // 5000ms as the default duration to show flash message. // Show the close button (x on the right). // Call myCallback with flash dismissed as parameter when flash has been dismissed.</pre> <p>Set configuration with <i>flashProvider</i>.</p> <pre class="prettyprint linenums"> app.config((FlashProvider) => { FlashProvider.setTimeout(5000); FlashProvider.setShowClose(true); FlashProvider.setOnDismiss(myCallback); FlashProvider.setAutoDismiss(false); });</pre> <h4> <a id="custom-template" class="anchor" href="#custom-template" aria-hidden="true"><span class="octicon octicon-link"></span></a>Use a custom template</h4> <p>By default, angular-flash use the Bootstrap flash standard template, but you can set your own template.</p> <p><strong>By giving it in the Js</strong>: use <i>.setTemplate(...)</i> with the template in parameter.</p> <pre class="prettyprint linenums"> app.config((FlashProvider) => { FlashProvider.setTemplate(` <div class="my-flash">{{ flash.text }}</div> `); });</pre> <p><strong>By giving it in the HTML</strong>: use <i>.setTemplatePreset('transclude')</i> with the template transcluded in the <i><flash-message></i> directive.</p> <pre class="prettyprint linenums"> app.config((FlashProvider) => { FlashProvider.setTemplatePreset('transclude'); });</pre> <pre class="prettyprint linenums"> <flash-message> <div class="my-flash">{{ flash.text }}</div> </flash-message></pre> </div> <div class="section"> <h3> <a id="how-to-use" class="anchor" href="#how-to-use" aria-hidden="true"><span class="octicon octicon-link"></span></a>How to use</h3> <p>Inject the <span class="atv">Flash</span> factory in your controller</p> <pre class="prettyprint linenums"> myApp.controller('demoCtrl', ['Flash', function(Flash) { $scope.successAlert = function () { var message = '<strong> Well done!</strong> You successfully read this important alert message.'; var id = Flash.create('success', message, 0, {class: 'custom-class', id: 'custom-id'}, true); // First argument (string) is the type of the flash alert. // Second argument (string) is the message displays in the flash alert (HTML is ok). // Third argument (number, optional) is the duration of showing the flash. 0 to not automatically hide flash (user needs to click the cross on top-right corner). // Fourth argument (object, optional) is the custom class and id to be added for the flash message created. // Fifth argument (boolean, optional) is the visibility of close button for this flash. // Returns the unique id of flash message that can be used to call Flash.dismiss(id); to dismiss the flash message. } }]);</pre> </div> <div class="section"> <h3><a id="type" class="anchor" href="#type" aria-hidden="true"><span class="octicon octicon-link"></span></a>Flash alert types</h3> <ul> <li>success</li> <li>info</li> <li>warning</li> <li>danger</li> </ul> </div> <div class="section"> <h3><a id="method" class="anchor" href="#method" aria-hidden="true"><span class="octicon octicon-link"></span></a>Methods</h3> <p> These methods are mostly for internal usage but can be used also from outside. </p> <pre class="prettyprint linenums"> Flash.dismiss(1); // Dismiss the flash with id of 1. Id is not the index of flash but instead a value returned by Flash.create() </pre> <pre class="prettyprint linenums"> Flash.clear(); // Dismisses all flashes shown. </pre> </div> <div class="section"> <h3><a id="bootstrap" class="anchor" href="#bootstrap" aria-hidden="true"><span class="octicon octicon-link"></span></a>Bootstrap</h3> <p>Angular-flash is fully compatible with Twitter Bootstrap. It uses standard Bootstrap classes. If Bootstrap CSS is already included in your document there is no need to include angular-flash.css in your document.</p> </div> <div class="section"> <h3><a id="ngAnimate" class="anchor" href="#ngAnimate" aria-hidden="true"><span class="octicon octicon-link"></span></a>ngAnimate</h3> <p>If you want to use animations, include ngAnimate module. You can then use regular Angular animation technique for applying your own transitions.</p> <pre class="prettyprint linenums mRb15"> var myApp = angular.module("app", ["ngFlash", "ngAnimate"]); </pre> <pre class="prettyprint linenums"> .alert {...} .alert.ng-enter, .alert.ng-enter.ng-enter-active {...} .alert.ng-leave, .alert.ng-leave.ng-leave-active {...} </pre> </div> <div class="section"> <h3><a id="Codepen" class="anchor" href="#Codepen" aria-hidden="true"><span class="octicon octicon-link"></span></a>Edit on Codepen</h3> <p data-height="288" data-theme-id="0" data-slug-hash="vEyyjZ" data-default-tab="result" data-user="sachinchoolur" class='codepen'>See the Pen <a href='http://codepen.io/sachinchoolur/pen/vEyyjZ/'>Flash message for AngularJS</a> by Sachin choolur (<a href='http://codepen.io/sachinchoolur'>@sachinchoolur</a>) on <a href='http://codepen.io'>CodePen</a>. </p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> </div> <div class="section"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2888290830590449" data-ad-slot="8352543813"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="section"> <h3><a id="type" class="anchor" href="#like" aria-hidden="true"><span class="octicon octicon-link"></span></a>Like angular-flash? You may also like</h3> <ul> <li><a href="https://github.com/sachinchoolur/lightGallery">LightGallery</a></li> <li><a href="https://github.com/sachinchoolur/lightslider">lightSlider</a></li> <li><a href="https://github.com/sachinchoolur/ladda-angular">Lada-angular</a></li> </ul> </div> <div class="section"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://sachinchoolur.github.io/angular-flash/" data-text="Flash message for #AngularJS" data-via="sachinchoolur" data-count="none" data-hashtags="javascript">Tweet</a> <script>!function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script> <a href="https://twitter.com/sachinchoolur" class="twitter-follow-button" data-show-count="false">Follow @sachinchoolur</a> <script>!function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script> <iframe src="https://ghbtns.com/github-btn.html?user=sachinchoolur&repo=angular-flash&type=star" frameborder="0" scrolling="0" width="170px" height="20px"></iframe> </div> </section> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.js"></script> <script type="text/javascript" src="javascripts/main.js"></script> <script type="text/javascript" src="../dist/angular-flash.js"></script> <script type="text/javascript" src="javascripts/prettify.js"></script> <script type="text/javascript"> window.prettyPrint && prettyPrint() </script> </body> </html>