Watch description changes

After discussion in #387

Author: davidlgj

karma.conf.js

@@ -29,6 +29,7 @@ module.exports = function(config) {
       'test/services/decorators-test.js',
       'test/services/messages-test.js',
       'test/directives/schema-form-test.js',
+      'test/directives/sf-messages-test.js',
     ],
 
     // list of files to exclude

src/directives/message.js

@@ -9,16 +9,24 @@ angular.module('schemaForm').directive('sfMessage',
       var $sanitize = $injector.has('$sanitize') ?
                       $injector.get('$sanitize') : function(html) { return html; };
 
-      //Prepare and sanitize message, i.e. description in most cases.
-      var msg = '';
+      var message = '';
+
       if (attrs.sfMessage) {
-        msg = scope.$eval(attrs.sfMessage) || '';
-        msg = $sanitize(msg);
+        scope.$watch(attrs.sfMessage, function(msg) {
+          if (msg) {
+            message = $sanitize(msg);
+            if (scope.ngModel) {
+              update(scope.ngModel.$valid);
+            } else {
+              update();
+            }
+          }
+        });
       }
 
       var update = function(valid) {
         if (valid && !scope.hasError()) {
-          element.html(msg);
+          element.html(message);
         } else {
 
 
@@ -48,7 +56,7 @@ angular.module('schemaForm').directive('sfMessage',
               scope.options && scope.options.validationMessage
             ));
           } else {
-            element.html(msg);
+            element.html(message);
           }
         }
       };

test/directives/sf-messages-test.js

@@ -0,0 +1,52 @@
+chai.should();
+
+describe('directive',function() {
+  beforeEach(module('templates'));
+  beforeEach(module('schemaForm'));
+  beforeEach(
+    //We don't need no sanitation. We don't need no thought control.
+    module(function($sceProvider){
+      $sceProvider.enabled(false);
+    })
+  );
+
+  it('should watch description for changes', function(done) {
+
+    var exampleSchema = {
+      "type": "object",
+      "properties": {
+        "name": {
+          "title": "Name",
+          "type": "string"
+        }
+      }
+    };
+
+    inject(function($compile,$rootScope) {
+      var scope = $rootScope.$new();
+      scope.person = {};
+
+      scope.schema = exampleSchema;
+
+      scope.form = [{
+        key: 'name',
+        description: 'foobar'
+      }];
+
+      var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"></form>');
+
+      $compile(tmpl)(scope);
+      $rootScope.$apply();
+      console.log(tmpl.children().find('div.help-block')[0]);
+      tmpl.children().find('div.help-block').text().should.equal('foobar');
+
+      setTimeout(function() {
+        scope.form[0].description = 'changed';
+        scope.$apply();
+        tmpl.children().find('div.help-block').text().should.equal('changed');
+        done();
+      },0);
+
+    });
+  });
+});