optionally send flashes to different containers (#39)

Author: javoire

README.md

@@ -146,6 +146,17 @@ Example:
 }
 ```
 
+#### Multiple flash containers
+
+You can send flashes to different containers by naming them and specifying their name in the config you pass to the `Flash.create` function.
+
+```html
+<flash-message name="flash-fixed"></flash-message>
+```
+```js
+Flash.create('success', 'Hooray!', 0, {container: 'flash-fixed'});
+```
+
 #### [Guidelines for contributors](https://github.com/sachinchoolur/angular-flash/blob/master/contributing.md)
 
 #### Running tests

src/angular-flash.js

@@ -55,7 +55,8 @@ app.directive('flashMessage', [
             scope: {
                 duration: '=',
                 showClose: '=',
-                onDismiss: '&'
+                onDismiss: '&',
+                name: '@'
             },
             link: function(scope, ele, attrs, ctrl, transclude) {
                 Flash.setTimeout(scope.duration);
@@ -73,7 +74,7 @@ app.directive('flashMessage', [
             },
             transclude: Flash.config.templateTransclude,
             template: `
-                <div ng-repeat="flash in $root.flashes track by $index">
+                <div ng-repeat="flash in $root.flashes track by $index" ng-if="flash.config.container === name">
                     ` + Flash.config.template + `
                 </div>
             `

test/angular-flash_test.js

@@ -76,6 +76,42 @@ describe('Unit testing Angular Flash', function() {
         expect(contents.querySelectorAll('.alert').length).toEqual(0);
     });
 
+    describe('show flashes in designated containers', function() {
+        var containers;
+
+        beforeEach(function() {
+            containers = $compile(
+                '<flash-message duration=1000></flash-message>' +
+                '<flash-message duration=1000 name="flash-container-a"></flash-message>' +
+                '<flash-message duration=1000 name="flash-container-b"></flash-message>')($rootScope);
+
+            Flash.create('success', 'All good');
+            Flash.create('success', 'All good - A', 0, { container: 'flash-container-a'});
+            Flash.create('success', 'All good - B', 0, { container: 'flash-container-b'});
+
+            $rootScope.$digest();
+        });
+
+        it('only shows default alert in default container', function() {
+            expect(containers[0].querySelectorAll('.alert').length).toEqual(1);
+            expect(containers[0].outerHTML).toContain('All good');
+            expect(containers[0].outerHTML).not.toContain('All good - A');
+            expect(containers[0].outerHTML).not.toContain('All good - B');
+        });
+
+        it('only shows alert A in container A', function() {
+            expect(containers[1].querySelectorAll('.alert').length).toEqual(1);
+            expect(containers[1].outerHTML).toContain('All good - A');
+            expect(containers[1].outerHTML).not.toContain('All good - B');
+        });
+
+        it('only shows alert B in container B', function() {
+            expect(containers[2].querySelectorAll('.alert').length).toEqual(1);
+            expect(containers[2].outerHTML).toContain('All good - B');
+            expect(containers[2].outerHTML).not.toContain('All good - A');
+        });
+    });
+
     describe('close button', function () {
         it('is shown by default', function() {
             Flash.create('success', 'All good');