Skip to content

Commit bc0fdb8

Browse files
ncodenRoopeHakulinen
ncoden
authored and
RoopeHakulinen
committed
Add config and custom template support (#36)
* Add config and custom template support Allow to: - Configure plugin in Angular config phase, instead of in the HTML - Use a custom flash message template, given in config or transcluded Other changes: - Add default configuration - Write HTML on several lines * Fix transclude scope * Add documentation for config and custom template * Version 2.3.0
1 parent cb2d1f2 commit bc0fdb8

11 files changed

+321
-135
lines changed

‎README.md‎

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@
66
A simple lightweight flash message module for AngularJS and Bootstrap.
77

88

9-
Demo
10-
----------------
9+
## Demo
1110
[angular-flash](http://sachinchoolur.github.io/angular-flash/) | [jsfiddle](http://jsfiddle.net/roopehakulinen/uxeg4nze/) | [codepen](http://codepen.io/RoopeHakulinen/pen/QyZjxm)
1211

1312

1413

15-
How to use
16-
---
14+
## Install
1715

1816
#### npm
1917

@@ -45,13 +43,61 @@ var myApp = angular.module("app", ["ngFlash"])
4543
```
4644
Include directive below in your HTML template.
4745
```html
48-
<flash-message duration="5000" show-close="true" on-dismiss="myCallback(flash);"></flash-message>
46+
<flash-message></flash-message>
47+
```
48+
49+
## Configure
50+
You can configure angular-flash by two ways:
51+
52+
Add attributes on the `<flash-message>` directive.
53+
```html
54+
<flash-message
55+
duration="5000"
56+
show-close="true"
57+
on-dismiss="myCallback(flash);"
58+
></flash-message>
4959
<!--
5060
5000ms as the default duration to show flash message.
5161
Show the close button (x on the right).
5262
Call myCallback with flash dismissed as parameter when flash has been dismissed.
5363
-->
5464
```
65+
66+
Set configuration with `flashProvider`.
67+
```javascript
68+
app.config((FlashProvider) => {
69+
FlashProvider.setTimeout(5000);
70+
FlashProvider.setShowClose(true);
71+
FlashProvider.setOnDismiss(myCallback);
72+
});
73+
```
74+
75+
#### Use a custom template
76+
77+
By default, angular-flash use the Bootstrap flash standard template, but you can set your own template.
78+
79+
**By giving it in the Js**: use `.setTemplate(...)` with the template in parameter.
80+
```javascript
81+
app.config((FlashProvider) => {
82+
FlashProvider.setTemplate(`
83+
<div class="my-flash">{{ flash.text }}</div>
84+
`);
85+
});
86+
```
87+
88+
**By giving it in the HTML**: use `.setTemplatePreset('transclude')` with the template transcluded in the `<flash-message>` directive.
89+
```javascript
90+
app.config((FlashProvider) => {
91+
FlashProvider.setTemplatePreset('transclude');
92+
});
93+
```
94+
```html
95+
<flash-message>
96+
<div class="my-flash">{{ flash.text }}</div>
97+
</flash-message>
98+
```
99+
100+
## How to use
55101
Inject the `Flash` factory in your controller
56102
```javascript
57103
myApp.controller('demoCtrl', ['Flash', function(Flash) {

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-flash-alert",
3-
"version": "2.2.7",
3+
"version": "2.3.0",
44
"homepage": "https://github.com/sachinchoolur/angular-flash",
55
"authors": [
66
"Sachin N <[email protected]>"

‎demo/index.html‎

Lines changed: 56 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,8 @@ <h3><a id="demo" class="anchor" href="#demo" aria-hidden="true"><span
101101
</div>
102102
<div class="section">
103103
<h3>
104-
<a id="howToUse" class="anchor" href="#howToUse" aria-hidden="true"><span
105-
class="octicon octicon-link"></span></a>How to use angular-flash?</h3>
104+
<a id="install" class="anchor" href="#install" aria-hidden="true"><span
105+
class="octicon octicon-link"></span></a>Install angular-flash</h3>
106106
<p>Add the following code to the &lt;head&gt; of your document.</p>
107107
<pre class="prettyprint linenums">
108108
&lt;link type="text/css" rel="stylesheet" href="dist/angular-flash.min.css" /&gt;
@@ -117,11 +117,62 @@ <h3>
117117
<p>Include <span style="font-size:13px;"><span class="atn">flash-message</span></span> directive in your
118118
HTML.</p>
119119
<pre class="prettyprint linenums">
120-
&lt;flash-message duration="5000" show-close="true" on-dismiss="myCallback(flash)" &gt;&lt;/flash-message&gt;
120+
&lt;flash-message&gt;&lt;/flash-message&gt;</pre>
121+
</div>
122+
123+
<div class="section">
124+
<h3>
125+
<a id="configure" class="anchor" href="#configure" aria-hidden="true"><span
126+
class="octicon octicon-link"></span></a>Configure</h3>
127+
<p>You can configure angular-flash by two ways:</p>
128+
129+
<p>Add attributes on the <i>&lt;flash-message&gt;</i> directive.</p>
130+
<pre class="prettyprint linenums">
131+
&lt;flash-message
132+
duration="5000"
133+
show-close="true"
134+
on-dismiss="myCallback(flash)"
135+
&gt;&lt;/flash-message&gt;
121136
// 5000ms as the default duration to show flash message.
122137
// Show the close button (x on the right).
123-
// Call myCallback with flash dismissed as parameter when flash has been dismissed.
124-
</pre>
138+
// Call myCallback with flash dismissed as parameter when flash has been dismissed.</pre>
139+
140+
<p>Set configuration with <i>flashProvider</i>.</p>
141+
<pre class="prettyprint linenums">
142+
app.config((FlashProvider) => {
143+
FlashProvider.setTimeout(5000);
144+
FlashProvider.setShowClose(true);
145+
FlashProvider.setOnDismiss(myCallback);
146+
});</pre>
147+
148+
<h4>
149+
<a id="custom-template" class="anchor" href="#custom-template" aria-hidden="true"><span
150+
class="octicon octicon-link"></span></a>Use a custom template</h4>
151+
<p>By default, angular-flash use the Bootstrap flash standard template, but you can set your own template.</p>
152+
153+
<p><strong>By giving it in the Js</strong>: use <i>.setTemplate(...)</i> with the template in parameter.</p>
154+
<pre class="prettyprint linenums">
155+
app.config((FlashProvider) => {
156+
FlashProvider.setTemplate(`
157+
<div class="my-flash">{{ flash.text }}</div>
158+
`);
159+
});</pre>
160+
161+
<p><strong>By giving it in the HTML</strong>: use <i>.setTemplatePreset('transclude')</i> with the template transcluded in the <i>&lt;flash-message&gt;</i> directive.</p>
162+
<pre class="prettyprint linenums">
163+
app.config((FlashProvider) => {
164+
FlashProvider.setTemplatePreset('transclude');
165+
});</pre>
166+
<pre class="prettyprint linenums">
167+
&lt;flash-message&gt;
168+
&lt;div class="my-flash"&gt;{{ flash.text }}&lt;/div&gt;
169+
&lt;/flash-message&gt;</pre>
170+
</div>
171+
172+
<div class="section">
173+
<h3>
174+
<a id="how-to-use" class="anchor" href="#how-to-use" aria-hidden="true"><span
175+
class="octicon octicon-link"></span></a>How to use</h3>
125176
<p>Inject the <span class="atv">Flash</span> factory in your controller</p>
126177
<pre class="prettyprint linenums">
127178
myApp.controller('demoCtrl', ['Flash', function(Flash) {

‎dist/angular-flash.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! angular-flash - v2.2.7 - 2016-04-24
1+
/*! angular-flash - v2.3.0 - 2016-04-24
22
* https://github.com/sachinchoolur/angular-flash
33
* Copyright (c) 2016 Sachin; Licensed MIT */
44

‎dist/angular-flash.js‎

Lines changed: 116 additions & 66 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)