allow custom feedback icons

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
 

bower.json

@@ -27,8 +27,5 @@
   },
   "dependencies": {
     "angular": ">1.3.0"
-  },
-  "resolutions": {
-    "angular": "1.3.6"
   }
 }

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) || "<span class=\"glyphicon {{feedbackIcon}} form-control-feedback\"></span>";
+
     feedbackIcon = (isGood = false) ->
-      icon = if isGood then "glyphicon-ok" else "glyphicon-remove"
-      "<span class=\"glyphicon #{icon} form-control-feedback\"></span>"
+      icon = if isGood then validIcon else invalidIcon
+      feedbackTemplate.replace /{{feedbackIcon}}/, icon
 
     unref = scope.$watch ->
       return unless ctrl.$dirty

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('<input name="input" ng-model="foo" required class="form-control" valid-icon="ohai" invalid-icon="kbai">')
+    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', '<div class="form-control-feedback custom-feedback"></div>'
+    [el, ctrl] = factory('<input name="input" ng-model="foo" required class="form-control" valid-icon="ohai" invalid-icon="kbai" feedback-template="custom-feedback.html">')
+
+    # [el, ctrl] = factory('<input name="input" ng-model="foo" required class="form-control" feedback-template="custom-feedback.html"/>')
+    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)