Merge pull request #184 from huei90/compile

Add $compile to output html
hueitan · Jan 4, 2016 · 051e0d5 · 051e0d5
2 parents 6658730 + 7763e58
commit 051e0d5
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 9 deletions.
diff --git a/API.md b/API.md
@@ -52,7 +52,7 @@ You can also add a `validation-group` directive to group many elements into a gr
 ```html
 <label>Validation group</label>
 <!-- Group both of these elements inside the contact group -->
-<input type="text" name="email" ng-model="email" validator="required" validation-group="contact"> 
+<input type="text" name="email" ng-model="email" validator="required" validation-group="contact">
 <input type="number" name="telephone" ng-model="telephone" validator="number" validation-group="contact">
 <!-- The message will be placed in side the span element -->
 <span id="contact"></span>
@@ -248,10 +248,14 @@ in `getDefaultMsg()`,and finally return the HTML code
     $validationProvider.setErrorHTML(function (msg) {
         // remember to return your HTML
         // eg: return '<p class="invalid">' + msg + '</p>';
+        // or using filter
+        // eg: return '<p class="invalid">{{"' + msg + '"| lowercase}}</p>';
     });
 
     $validationProvider.setSuccessHTML(function (msg) {
         // eg: return '<p class="valid">' + msg + '</p>';
+        // or using filter
+        // eg: return '<p class="valid">{{"' + msg + '"| lowercase}}</p>';
     });
 }]);
 ```
@@ -282,7 +286,7 @@ The built in `maxlength` and `minlength` validators use parameters to configure
 <input type="text" name="username" ng-model="form.username" validator="maxlength=6"/>
 ```
 
-You can use parameters in your custom validators in the same way. 
+You can use parameters in your custom validators in the same way.
 You can access this parameter in the validation expression like so:
 
 ```html
@@ -358,5 +362,3 @@ angular.module('yourApp', ['validation'])
 		};
     }]);
 ```
-
-
diff --git a/dist/angular-validation.js b/dist/angular-validation.js
@@ -363,6 +363,7 @@
     var $validationProvider = $injector.get('$validation');
     var $q = $injector.get('$q');
     var $timeout = $injector.get('$timeout');
+    var $compile = $injector.get('$compile');
     var $parse = $injector.get('$parse');
 
     /**
@@ -387,7 +388,7 @@
       if (element.attr('no-validation-message')) {
         messageElem.css('display', 'none');
       } else if ($validationProvider.showSuccessMessage && messageToShow) {
-        messageElem.html($validationProvider.getSuccessHTML(messageToShow));
+        messageElem.html('').append($compile($validationProvider.getSuccessHTML(messageToShow))(scope));
         messageElem.css('display', '');
       } else {
         messageElem.css('display', 'none');
@@ -425,7 +426,7 @@
       if (element.attr('no-validation-message')) {
         messageElem.css('display', 'none');
       } else if ($validationProvider.showErrorMessage && messageToShow) {
-        messageElem.html($validationProvider.getErrorHTML(messageToShow));
+        messageElem.html('').append($compile($validationProvider.getErrorHTML(messageToShow))(scope));
         messageElem.css('display', '');
       } else {
         messageElem.css('display', 'none');

diff --git a/dist/angular-validation.min.js b/dist/angular-validation.min.js
diff --git a/src/validator.directive.js b/src/validator.directive.js
@@ -7,6 +7,7 @@
     var $validationProvider = $injector.get('$validation');
     var $q = $injector.get('$q');
     var $timeout = $injector.get('$timeout');
+    var $compile = $injector.get('$compile');
     var $parse = $injector.get('$parse');
 
     /**
@@ -31,7 +32,7 @@
       if (element.attr('no-validation-message')) {
         messageElem.css('display', 'none');
       } else if ($validationProvider.showSuccessMessage && messageToShow) {
-        messageElem.html($validationProvider.getSuccessHTML(messageToShow));
+        messageElem.html('').append($compile($validationProvider.getSuccessHTML(messageToShow))(scope));
         messageElem.css('display', '');
       } else {
         messageElem.css('display', 'none');
@@ -69,7 +70,7 @@
       if (element.attr('no-validation-message')) {
         messageElem.css('display', 'none');
       } else if ($validationProvider.showErrorMessage && messageToShow) {
-        messageElem.html($validationProvider.getErrorHTML(messageToShow));
+        messageElem.html('').append($compile($validationProvider.getErrorHTML(messageToShow))(scope));
         messageElem.css('display', '');
       } else {
         messageElem.css('display', 'none');