diff --git a/README.md b/README.md index 8fabd36..f1e5bb5 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,16 @@ icons to your form fields. ![Validation in action](./docs/iconstates.png) +## Bonus bonus round: custom feedback icons! + +`feedback-template` will look for a template in cache to use instead of the default one. +*note:* this template needs to have a css class of `form-control-feedback` or +you will get strange behavior. + +`valid-icon` will use this instead of the default `glyphicon-ok` when valid + +`invalid-icon` will use this instead of the default `glyphicon-remove` when invalid + ## Contributing diff --git a/bower.json b/bower.json index d62e10f..4a34200 100644 --- a/bower.json +++ b/bower.json @@ -27,8 +27,5 @@ }, "dependencies": { "angular": ">1.3.0" - }, - "resolutions": { - "angular": "1.3.6" } } diff --git a/src/has-feedback.coffee b/src/has-feedback.coffee index 78c88f5..ae53d65 100644 --- a/src/has-feedback.coffee +++ b/src/has-feedback.coffee @@ -8,12 +8,17 @@ angular.module("ng-form-group") toArray(el[0].querySelectorAll(".form-control")).forEach (input) -> input.setAttribute("has-feedback-watcher", "") -.directive "hasFeedbackWatcher", -> +.directive "hasFeedbackWatcher", ($templateCache) -> require: "ngModel", link: (scope, input, attrs, ctrl) -> + + validIcon = attrs.validIcon || "glyphicon-ok" + invalidIcon = attrs.invalidIcon || "glyphicon-remove" + feedbackTemplate = $templateCache.get(attrs.feedbackTemplate) || ""; + feedbackIcon = (isGood = false) -> - icon = if isGood then "glyphicon-ok" else "glyphicon-remove" - "" + icon = if isGood then validIcon else invalidIcon + feedbackTemplate.replace /{{feedbackIcon}}/, icon unref = scope.$watch -> return unless ctrl.$dirty diff --git a/tests/has-feedback.coffee b/tests/has-feedback.coffee index 2884516..c14453c 100644 --- a/tests/has-feedback.coffee +++ b/tests/has-feedback.coffee @@ -36,3 +36,25 @@ describe 'The informative has-feedback directive', -> expect(find(el, '.glyphicon-ok').length).toBe(0) expect(find(el, '.glyphicon-remove').length).toBe(1) + + it "should allow the use of custom feedback icons", -> + [el, ctrl] = factory('') + ctrl.input.$setViewValue('1000') + ctrl.input.$setViewValue('') + + expect(find(el, '.glyphicon-ok').length).toBe(0) + expect(find(el, '.glyphicon-remove').length).toBe(0) + expect(find(el, '.kbai').length).toBe(1) + + it "should allow the use of custom feedback templates", -> + inject ($templateCache) -> + $templateCache.put 'custom-feedback.html', '
' + [el, ctrl] = factory('') + + # [el, ctrl] = factory('') + ctrl.input.$setViewValue('1000') + ctrl.input.$setViewValue('') + + expect(find(el, '.custom-feedback').length).toBe(1) + expect(find(el, '.glyphicon-ok').length).toBe(0) + expect(find(el, '.glyphicon-remove').length).toBe(0) \ No newline at end of file