Created
June 18, 2014 14:52
-
-
Save cpoDesign/35f87522e3d41c4ae807 to your computer and use it in GitHub Desktop.
New version of notification directive to allow add errorMessage, successMessage, warnMessage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = angular.module('app', []); | |
| app.controller('priorityCtr', | |
| function priorityCtr($rootScope, $scope){ | |
| $scope.showError = function(){ | |
| $rootScope.errorMessage='test error message'; | |
| $rootScope.successMessage=''; | |
| $rootScope.warnMessage=''; | |
| }; | |
| $scope.showErrorAndSuccess = function(){ | |
| $rootScope.errorMessage='test error message 1'; | |
| $rootScope.successMessage='test success message'; | |
| $rootScope.warnMessage=''; | |
| }; | |
| $scope.showSuccess = function(){ | |
| $rootScope.successMessage='test success message'; | |
| $rootScope.errorMessage=''; | |
| $rootScope.warnMessage=''; | |
| }; | |
| $scope.showWarn = function(){ | |
| $rootScope.warnMessage='test warn message'; | |
| $rootScope.successMessage=''; | |
| $rootScope.errorMessage=''; | |
| }; | |
| $scope.clearMessages = function(){ | |
| $rootScope.successMessage=''; | |
| $rootScope.errorMessage=''; | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="app"> | |
| <head> | |
| <script src="../js/angular.js" type="application/javascript"></script> | |
| <script src="app.js"></script> | |
| <script src="aspNotificationBar/aspNotificationBar.js"></script> | |
| <style> | |
| div.Error{ | |
| background-color: red; | |
| } | |
| div.Success{ | |
| background-color: green; | |
| } | |
| div.Warning{ | |
| background-color: #FC6; | |
| } | |
| i{ | |
| padding:1ex; | |
| } | |
| i.icon-remove{ | |
| background-color: greenyellow; | |
| width: 5em; | |
| } | |
| i.icon-ok{ | |
| background-color: blue; | |
| width: 5em;; | |
| } | |
| i.icon-asterisk{ | |
| background-color: lightslategrey; | |
| width: 5em; | |
| } | |
| </style> | |
| </head> | |
| <body > | |
| <p>Directive demo for displaying multiple messages</p> | |
| <div> Source code: <a href="https://www.dropbox.com/s/t1bnsqvtdw0pvj0/DirectiveMessages.zip"><strong>https://www.dropbox.com/s/t1bnsqvtdw0pvj0/DirectiveMessages.zip</strong></a></div> | |
| <div style="clear:both;" data-asp-notification-bar success-message="{{successMessage}}" error-message="{{ errorMessage }}" warn-message="{{ warnMessage }}"> </div> | |
| <br> | |
| <div ng-controller="priorityCtr"> | |
| <button ng-click="showError()"> error</button> | |
| <button ng-click="showSuccess()"> success</button> | |
| <button ng-click="showWarn()"> warn</button> | |
| <button ng-click="showErrorAndSuccess()"> error and success</button> | |
| <button ng-click="clearMessages()"> Clear messages</button> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Variable</th> | |
| <th>Value in $rootScope</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>successMessage</td> | |
| <td>{{successMessage}}</td> | |
| </tr> | |
| <tr> | |
| <td>errorMessage</td> | |
| <td>{{errorMessage}}</td> | |
| </tr> | |
| <tr> | |
| <td>warnMessage</td> | |
| <td>{{warnMessage}}</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p>Directive is using root scope to set messages: successMessage, errorMessage, warnMessage</p> | |
| <p>This example is using * AngularJS v1.2.16</p> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| app.directive("notificationBar", function () { | |
| return { | |
| // restrict: 'E', -- do not use restriction as element | |
| transclude: false, | |
| require: '^ngModel', | |
| templateUrl: 'notificationBar/template.html', | |
| scope: { | |
| errorMessage: '@', | |
| warnMessage: '@', | |
| successMessage: '@' | |
| }, | |
| controller: function ($scope){ | |
| $scope.displayMessage = ''; | |
| $scope.$watch('errorMessage + successMessage + warnMessage', function() | |
| { | |
| if ($scope.successMessage.length>0 && $scope.errorMessage.length>0) { | |
| console.log('Error message will take precedence over success') | |
| } | |
| if($scope.errorMessage.length>0){ | |
| $scope.displayMessage = $scope.errorMessage; | |
| $scope.iconType = 'icon-remove'; | |
| $scope.msgType = 'Error'; | |
| return; | |
| } | |
| if($scope.successMessage.length>0){ | |
| $scope.msgType = 'Success'; | |
| $scope.iconType = 'icon-ok'; | |
| $scope.displayMessage = $scope.successMessage; | |
| return; | |
| } | |
| if($scope.warnMessage.length>0){ | |
| $scope.msgType = 'Warning'; | |
| $scope.iconType = 'icon-asterisk'; | |
| $scope.displayMessage = $scope.warnMessage; | |
| return; | |
| } | |
| $scope.displayMessage = ''; | |
| }); | |
| $scope.showMessage = function() { | |
| return $scope.displayMessage.length > 0; | |
| } | |
| } | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div ng-show="showMessage()" class="Response" ng-class="msgType"> | |
| <i ng-class="iconType"></i> <span class="i-name">{{displayMessage}}</span> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment