' + msg + '
'; + // or using filter + // eg: return '{{"' + msg + '"| lowercase}}
'; }); $validationProvider.setSuccessHTML(function (msg) { // eg: return '' + msg + '
'; + // or using filter + // eg: return '{{"' + msg + '"| lowercase}}
'; }); }]); ``` @@ -282,7 +286,7 @@ The built in `maxlength` and `minlength` validators use parameters to configure ``` -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 index 79d8d6a..09bf93c 100644 --- 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 index 44abada..493e4ba 100644 --- a/dist/angular-validation.min.js +++ b/dist/angular-validation.min.js @@ -1 +1 @@ -(function(){angular.module("validation",["validation.provider","validation.directive"]),angular.module("validation.provider",[]),angular.module("validation.directive",["validation.provider"])}).call(this),function(){function a(){var a,b,c,d,e,f=this,g=function(f){a=f,b=a.get("$rootScope"),c=a.get("$http"),d=a.get("$q"),e=a.get("$timeout")},h={},i=null,j={};this.setExpression=function(a){return angular.extend(h,a),f},this.getExpression=function(a){return h[a]},this.setDefaultMsg=function(a){return angular.extend(j,a),f},this.getDefaultMsg=function(a){return j[a]},this.setValidMethod=function(a){i=a},this.getValidMethod=function(){return i},this.setErrorHTML=function(a){return a.constructor===Function?(f.getErrorHTML=a,f):void 0},this.getErrorHTML=function(a){return''+a+"
"},this.setSuccessHTML=function(a){return a.constructor===Function?(f.getSuccessHTML=a,f):void 0},this.getSuccessHTML=function(a){return''+a+"
"},this.showSuccessMessage=!0,this.showErrorMessage=!0,this.checkValid=function(a){return!(!a||!a.$valid)},this.validate=function(a){var c=d.defer(),g=0;if(void 0===a)return console.error("This is not a regular Form name scope"),c.reject("This is not a regular Form name scope"),c.promise;if(a.validationId)b.$broadcast(a.$name+"submit-"+a.validationId,g++);else if(a.constructor===Array)for(var h in a)b.$broadcast(a[h].$name+"submit-"+a[h].validationId,g++);else for(var i in a)"$"!==i[0]&&a[i].hasOwnProperty("$dirty")&&b.$broadcast(i+"submit-"+a[i].validationId,g++);return c.promise.success=function(a){return c.promise.then(function(b){a(b)}),c.promise},c.promise.error=function(a){return c.promise.then(null,function(b){a(b)}),c.promise},e(function(){f.checkValid(a)?c.resolve("success"):c.reject("error")}),c.promise},this.validCallback=null,this.invalidCallback=null,this.resetCallback=null,this.reset=function(a){if(void 0===a)return void console.error("This is not a regular Form name scope");if(a.validationId)b.$broadcast(a.$name+"reset-"+a.validationId);else if(a.constructor===Array)for(var c in a)b.$broadcast(a[c].$name+"reset-"+a[c].validationId);else for(var d in a)"$"!==d[0]&&a[d].hasOwnProperty("$dirty")&&b.$broadcast(d+"reset-"+a[d].validationId)},this.$get=["$injector",function(a){return g(a),{setValidMethod:this.setValidMethod,getValidMethod:this.getValidMethod,setErrorHTML:this.setErrorHTML,getErrorHTML:this.getErrorHTML,setSuccessHTML:this.setSuccessHTML,getSuccessHTML:this.getSuccessHTML,setExpression:this.setExpression,getExpression:this.getExpression,setDefaultMsg:this.setDefaultMsg,getDefaultMsg:this.getDefaultMsg,showSuccessMessage:this.showSuccessMessage,showErrorMessage:this.showErrorMessage,checkValid:this.checkValid,validate:this.validate,validCallback:this.validCallback,invalidCallback:this.invalidCallback,resetCallback:this.resetCallback,reset:this.reset}}]}angular.module("validation.provider").provider("$validation",a)}.call(this),function(){function a(a){var b=a.get("$validation"),c=a.get("$timeout"),d=a.get("$parse");return{link:function(a,e,f){var g=d(f.validationReset)(a);c(function(){e.on("click",function(a){a.preventDefault(),b.reset(g)})})}}}angular.module("validation.directive").directive("validationReset",a),a.$inject=["$injector"]}.call(this),function(){function a(a){var b=a.get("$validation"),c=a.get("$timeout"),d=a.get("$parse");return{priority:1,require:"?ngClick",link:function(a,e,f){var g=d(f.validationSubmit)(a);c(function(){e.off("click"),e.on("click",function(c){c.preventDefault(),b.validate(g).success(function(){d(f.ngClick)(a)})})})}}}angular.module("validation.directive").directive("validationSubmit",a),a.$inject=["$injector"]}.call(this),function(){function a(a){var b=a.get("$validation"),c=a.get("$q"),d=a.get("$timeout"),e=a.get("$parse"),f=function(a,c,d,f,g,h){var i,j=c||b.getDefaultMsg(d).success,k=e("success"),l=h.messageId,m=h.validationGroup;return i=l||m?angular.element(document.querySelector("#"+(l||m))):a.next(),a.attr("no-validation-message")?i.css("display","none"):b.showSuccessMessage&&j?(i.html(b.getSuccessHTML(j)),i.css("display","")):i.css("display","none"),g.$setValidity(g.$name,!0),k&&k({message:j}),b.validCallback&&b.validCallback(a),!0},g=function(a,c,d,f,g,h){var i,j=c||b.getDefaultMsg(d).error,k=e("error"),l=h.messageId,m=h.validationGroup;return i=l||m?angular.element(document.querySelector("#"+(l||m))):a.next(),a.attr("no-validation-message")?i.css("display","none"):b.showErrorMessage&&j?(i.html(b.getErrorHTML(j)),i.css("display","")):i.css("display","none"),g.$setValidity(g.$name,!1),k&&k({message:j}),b.invalidCallback&&b.invalidCallback(a),!1},h=function(a,b,c,d){var e,f=c.validationGroup,g=document.querySelectorAll("*[validation-group="+f+"]");d.$setValidity(d.$name,!1);for(var h=0,i=g.length;i>h;h++)if(e=angular.element(g[h]),e.hasClass("ng-valid")&&e[0]!==b[0])return!0;return!1},i={},j=function(a,d,e,i,k,l){var m=k.slice(0),n=m[0].trim(),o=n.indexOf("="),p=-1===o?n:n.substr(0,o),q=-1===o?null:n.substr(o+1),r=m.slice(1),s=p+"SuccessMessage",t=p+"ErrorMessage",u=b.getExpression(p),v=e.validationGroup,w={success:function(){return f(d,e[s],p,a,i,e),r.length?j(a,d,e,i,r,l):!0},error:function(){return g(d,e[t],p,a,i,e)}};return void 0===u?(console.error('You are using undefined validator "%s"',p),r.length?j(a,d,e,i,r,l):void 0):u.constructor===Function?c.all([b.getExpression(p)(l,a,d,e,q)]).then(function(b){return b&&b.length>0&&b[0]?w.success():v?void(h(a,d,e,i)||w.error()):w.error()},function(){return w.error()}):u.constructor!==RegExp?w.error():void 0!==l&&null!==l?b.getExpression(p).test(l)?w.success():w.error():v?void(h(a,d,e,i)||w.error()):w.error()},k=function(){return(65536*(1+Math.random())|0).toString(16).substring(1)},l=function(){return k()+k()+k()+k()};return{restrict:"A",require:"ngModel",link:function(a,c,e,f){var g,h=e.validator,k=e.messageId,m=e.validationGroup,n=e.validMethod,o=e.ngModel,p=function(){},q=h.split(","),r=f.validationId=l();return"boolean"==typeof a.initialValidity&&(g=a.initialValidity),k||m||c.after(""),f.$setValidity(f.$name,g),a.$on(f.$name+"reset-"+r,function(){p(),d(function(){f.$setViewValue(""),f.$setPristine(),f.$setValidity(f.$name,void 0),f.$render(),k||m?angular.element(document.querySelector("#"+(k||m))).html(""):c.next().html(""),b.resetCallback&&b.resetCallback(c)})}),n=angular.isUndefined(n)?b.getValidMethod():n,a.$on(f.$name+"submit-"+r,function(b,g){var h=f.$viewValue,k=!1;k=j(a,c,e,f,q,h),"submit"===n&&(p(),p=a.$watch(function(){return a.$eval(o)},function(b,d){b!==d&&((void 0===b||null===b)&&(b=""),k=j(a,c,e,f,q,b))}));var l=function(a){a?delete i[g]:(i[g]=c[0],d(function(){i[Math.min.apply(null,Object.keys(i))].focus()},0))};k.constructor===Object?k.then(l):l(k)}),"blur"===n?void c.bind("blur",function(){var b=a.$eval(o);a.$apply(function(){j(a,c,e,f,q,b)})}):void("submit"!==n&&"submit-only"!==n&&(a.$watch(function(){return a.$eval(o)},function(b){if(f.$pristine&&f.$viewValue)f.$setViewValue(f.$viewValue);else if(f.$pristine)return void(k||m?angular.element(document.querySelector("#"+(k||m))).html(""):c.next().html(""));j(a,c,e,f,q,b)}),d(function(){e.$observe("noValidationMessage",function(a){var b;b=k||m?angular.element(document.querySelector("#"+(k||m))):c.next(),"true"===a||a===!0?b.css("display","none"):("false"===a||a===!1)&&b.css("display","block")})})))}}}angular.module("validation.directive").directive("validator",a),a.$inject=["$injector"]}.call(this); \ No newline at end of file +(function(){angular.module("validation",["validation.provider","validation.directive"]),angular.module("validation.provider",[]),angular.module("validation.directive",["validation.provider"])}).call(this),function(){function a(){var a,b,c,d,e,f=this,g=function(f){a=f,b=a.get("$rootScope"),c=a.get("$http"),d=a.get("$q"),e=a.get("$timeout")},h={},i=null,j={};this.setExpression=function(a){return angular.extend(h,a),f},this.getExpression=function(a){return h[a]},this.setDefaultMsg=function(a){return angular.extend(j,a),f},this.getDefaultMsg=function(a){return j[a]},this.setValidMethod=function(a){i=a},this.getValidMethod=function(){return i},this.setErrorHTML=function(a){return a.constructor===Function?(f.getErrorHTML=a,f):void 0},this.getErrorHTML=function(a){return''+a+"
"},this.setSuccessHTML=function(a){return a.constructor===Function?(f.getSuccessHTML=a,f):void 0},this.getSuccessHTML=function(a){return''+a+"
"},this.showSuccessMessage=!0,this.showErrorMessage=!0,this.checkValid=function(a){return!(!a||!a.$valid)},this.validate=function(a){var c=d.defer(),g=0;if(void 0===a)return console.error("This is not a regular Form name scope"),c.reject("This is not a regular Form name scope"),c.promise;if(a.validationId)b.$broadcast(a.$name+"submit-"+a.validationId,g++);else if(a.constructor===Array)for(var h in a)b.$broadcast(a[h].$name+"submit-"+a[h].validationId,g++);else for(var i in a)"$"!==i[0]&&a[i].hasOwnProperty("$dirty")&&b.$broadcast(i+"submit-"+a[i].validationId,g++);return c.promise.success=function(a){return c.promise.then(function(b){a(b)}),c.promise},c.promise.error=function(a){return c.promise.then(null,function(b){a(b)}),c.promise},e(function(){f.checkValid(a)?c.resolve("success"):c.reject("error")}),c.promise},this.validCallback=null,this.invalidCallback=null,this.resetCallback=null,this.reset=function(a){if(void 0===a)return void console.error("This is not a regular Form name scope");if(a.validationId)b.$broadcast(a.$name+"reset-"+a.validationId);else if(a.constructor===Array)for(var c in a)b.$broadcast(a[c].$name+"reset-"+a[c].validationId);else for(var d in a)"$"!==d[0]&&a[d].hasOwnProperty("$dirty")&&b.$broadcast(d+"reset-"+a[d].validationId)},this.$get=["$injector",function(a){return g(a),{setValidMethod:this.setValidMethod,getValidMethod:this.getValidMethod,setErrorHTML:this.setErrorHTML,getErrorHTML:this.getErrorHTML,setSuccessHTML:this.setSuccessHTML,getSuccessHTML:this.getSuccessHTML,setExpression:this.setExpression,getExpression:this.getExpression,setDefaultMsg:this.setDefaultMsg,getDefaultMsg:this.getDefaultMsg,showSuccessMessage:this.showSuccessMessage,showErrorMessage:this.showErrorMessage,checkValid:this.checkValid,validate:this.validate,validCallback:this.validCallback,invalidCallback:this.invalidCallback,resetCallback:this.resetCallback,reset:this.reset}}]}angular.module("validation.provider").provider("$validation",a)}.call(this),function(){function a(a){var b=a.get("$validation"),c=a.get("$timeout"),d=a.get("$parse");return{link:function(a,e,f){var g=d(f.validationReset)(a);c(function(){e.on("click",function(a){a.preventDefault(),b.reset(g)})})}}}angular.module("validation.directive").directive("validationReset",a),a.$inject=["$injector"]}.call(this),function(){function a(a){var b=a.get("$validation"),c=a.get("$timeout"),d=a.get("$parse");return{priority:1,require:"?ngClick",link:function(a,e,f){var g=d(f.validationSubmit)(a);c(function(){e.off("click"),e.on("click",function(c){c.preventDefault(),b.validate(g).success(function(){d(f.ngClick)(a)})})})}}}angular.module("validation.directive").directive("validationSubmit",a),a.$inject=["$injector"]}.call(this),function(){function a(a){var b=a.get("$validation"),c=a.get("$q"),d=a.get("$timeout"),e=a.get("$compile"),f=a.get("$parse"),g=function(a,c,d,g,h,i){var j,k=c||b.getDefaultMsg(d).success,l=f("success"),m=i.messageId,n=i.validationGroup;return j=m||n?angular.element(document.querySelector("#"+(m||n))):a.next(),a.attr("no-validation-message")?j.css("display","none"):b.showSuccessMessage&&k?(j.html("").append(e(b.getSuccessHTML(k))(g)),j.css("display","")):j.css("display","none"),h.$setValidity(h.$name,!0),l&&l({message:k}),b.validCallback&&b.validCallback(a),!0},h=function(a,c,d,g,h,i){var j,k=c||b.getDefaultMsg(d).error,l=f("error"),m=i.messageId,n=i.validationGroup;return j=m||n?angular.element(document.querySelector("#"+(m||n))):a.next(),a.attr("no-validation-message")?j.css("display","none"):b.showErrorMessage&&k?(j.html("").append(e(b.getErrorHTML(k))(g)),j.css("display","")):j.css("display","none"),h.$setValidity(h.$name,!1),l&&l({message:k}),b.invalidCallback&&b.invalidCallback(a),!1},i=function(a,b,c,d){var e,f=c.validationGroup,g=document.querySelectorAll("*[validation-group="+f+"]");d.$setValidity(d.$name,!1);for(var h=0,i=g.length;i>h;h++)if(e=angular.element(g[h]),e.hasClass("ng-valid")&&e[0]!==b[0])return!0;return!1},j={},k=function(a,d,e,f,j,l){var m=j.slice(0),n=m[0].trim(),o=n.indexOf("="),p=-1===o?n:n.substr(0,o),q=-1===o?null:n.substr(o+1),r=m.slice(1),s=p+"SuccessMessage",t=p+"ErrorMessage",u=b.getExpression(p),v=e.validationGroup,w={success:function(){return g(d,e[s],p,a,f,e),r.length?k(a,d,e,f,r,l):!0},error:function(){return h(d,e[t],p,a,f,e)}};return void 0===u?(console.error('You are using undefined validator "%s"',p),r.length?k(a,d,e,f,r,l):void 0):u.constructor===Function?c.all([b.getExpression(p)(l,a,d,e,q)]).then(function(b){return b&&b.length>0&&b[0]?w.success():v?void(i(a,d,e,f)||w.error()):w.error()},function(){return w.error()}):u.constructor!==RegExp?w.error():void 0!==l&&null!==l?b.getExpression(p).test(l)?w.success():w.error():v?void(i(a,d,e,f)||w.error()):w.error()},l=function(){return(65536*(1+Math.random())|0).toString(16).substring(1)},m=function(){return l()+l()+l()+l()};return{restrict:"A",require:"ngModel",link:function(a,c,e,f){var g,h=e.validator,i=e.messageId,l=e.validationGroup,n=e.validMethod,o=e.ngModel,p=function(){},q=h.split(","),r=f.validationId=m();return"boolean"==typeof a.initialValidity&&(g=a.initialValidity),i||l||c.after(""),f.$setValidity(f.$name,g),a.$on(f.$name+"reset-"+r,function(){p(),d(function(){f.$setViewValue(""),f.$setPristine(),f.$setValidity(f.$name,void 0),f.$render(),i||l?angular.element(document.querySelector("#"+(i||l))).html(""):c.next().html(""),b.resetCallback&&b.resetCallback(c)})}),n=angular.isUndefined(n)?b.getValidMethod():n,a.$on(f.$name+"submit-"+r,function(b,g){var h=f.$viewValue,i=!1;i=k(a,c,e,f,q,h),"submit"===n&&(p(),p=a.$watch(function(){return a.$eval(o)},function(b,d){b!==d&&((void 0===b||null===b)&&(b=""),i=k(a,c,e,f,q,b))}));var l=function(a){a?delete j[g]:(j[g]=c[0],d(function(){j[Math.min.apply(null,Object.keys(j))].focus()},0))};i.constructor===Object?i.then(l):l(i)}),"blur"===n?void c.bind("blur",function(){var b=a.$eval(o);a.$apply(function(){k(a,c,e,f,q,b)})}):void("submit"!==n&&"submit-only"!==n&&(a.$watch(function(){return a.$eval(o)},function(b){if(f.$pristine&&f.$viewValue)f.$setViewValue(f.$viewValue);else if(f.$pristine)return void(i||l?angular.element(document.querySelector("#"+(i||l))).html(""):c.next().html(""));k(a,c,e,f,q,b)}),d(function(){e.$observe("noValidationMessage",function(a){var b;b=i||l?angular.element(document.querySelector("#"+(i||l))):c.next(),"true"===a||a===!0?b.css("display","none"):("false"===a||a===!1)&&b.css("display","block")})})))}}}angular.module("validation.directive").directive("validator",a),a.$inject=["$injector"]}.call(this); \ No newline at end of file diff --git a/src/validator.directive.js b/src/validator.directive.js index 9a70e36..251838c 100644 --- 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'); diff --git a/test/unit/compileSpec.js b/test/unit/compileSpec.js new file mode 100644 index 0000000..9556e87 --- /dev/null +++ b/test/unit/compileSpec.js @@ -0,0 +1,47 @@ +'use strict'; + +/* jasmine specs for compilation go here */ + +describe('Compilation - Example of Required', function() { + var myApp; + var $scope; + var $rootScope; + var $compile; + var $timeout; + var element; + + beforeEach(module('validation.directive')); + beforeEach(module('validation.rule')); + + beforeEach(function() { + myApp = angular.module('myApp', ['validation', 'validation.rule']) + .config(function($validationProvider) { + $validationProvider.setSuccessHTML(function(msg) { + // given the example of using filter + return '{{"' + msg + '"| lowercase}}
'; + }); + }); + + return myApp; + }); + + beforeEach(module('myApp')); + + beforeEach(inject(function($injector) { + $rootScope = $injector.get('$rootScope'); + $compile = $injector.get('$compile'); + $timeout = $injector.get('$timeout'); + $scope = $rootScope.$new(); + + element = $compile('')($scope); + $scope.$digest(); + })); + + it('It should be lowercase', function() { + $scope.Form.required.$setViewValue('Required'); + var messageElem = angular.element(element[0].querySelector('p')); + // console.log(messageElem[0].indexOf('it\'s required')); + expect(messageElem.html()).toEqual('it\'s required'); + }); + +});