Simplify sfMessage directive and uses

There's no need to overthink sfMessage; in all cases it uses the parent scope's . This allows faster processing, and full data-binding so that an application can modify descriptions on-the-fly.

Author: mike-marcacci

docs/extending.md

@@ -54,7 +54,7 @@ This is sort of the template for the datepicker:
          max-date="form.maxDate"
          format="form.format" />
 
-  <span class="help-block" sf-message="form.description"></span>
+  <span class="help-block" sf-message></span>
 </div>
 ```
 

src/directives/decorators/bootstrap/checkbox.html

@@ -11,5 +11,5 @@
            name="{{form.key.slice(-1)[0]}}">
     <span ng-bind-html="form.title"></span>
   </label>
-  <div class="help-block" sf-message="form.description"></div>
+  <div class="help-block" sf-message></div>
 </div>

src/directives/decorators/bootstrap/checkboxes.html

@@ -14,5 +14,5 @@
     </label>
 
   </div>
-  <div class="help-block" sf-message="form.description"></div>
+  <div class="help-block" sf-message></div>
 </div>

src/directives/decorators/bootstrap/default.html

@@ -50,5 +50,5 @@
         id="{{form.key.slice(-1)[0] + 'Status'}}"
         class="sr-only">{{ hasSuccess() ? '(success)' : '(error)' }}</span>
 
-  <div class="help-block" sf-message="form.description"></div>
+  <div class="help-block" sf-message></div>
 </div>

src/directives/decorators/bootstrap/radio-buttons.html

@@ -20,5 +20,5 @@
       <span ng-bind-html="item.name"></span>
     </label>
   </div>
-  <div class="help-block" sf-message="form.description"></div>
+  <div class="help-block" sf-message></div>
 </div>

src/directives/decorators/bootstrap/radios-inline.html

@@ -14,5 +14,5 @@
       <span ng-bind-html="item.name"></span>
     </label>
   </div>
-  <div class="help-block" sf-message="form.description"></div>
+  <div class="help-block" sf-message></div>
 </div>

src/directives/decorators/bootstrap/radios.html

@@ -14,5 +14,5 @@
       <span ng-bind-html="item.name"></span>
     </label>
   </div>
-  <div class="help-block" sf-message="form.description"></div>
+  <div class="help-block" sf-message></div>
 </div>

src/directives/decorators/bootstrap/select.html

@@ -12,5 +12,5 @@
           ng-options="item.value as item.name group by item.group for item in form.titleMap"
           name="{{form.key.slice(-1)[0]}}">
   </select>
-  <div class="help-block" sf-message="form.description"></div>
+  <div class="help-block" sf-message></div>
 </div>

src/directives/decorators/bootstrap/textarea.html

@@ -31,5 +31,5 @@
           ng-bind-html="form.fieldAddonRight"></span>
   </div>
 
-  <span class="help-block" sf-message="form.description"></span>
+  <span class="help-block" sf-message></span>
 </div>

src/directives/message.js

@@ -1,53 +1,28 @@
 angular.module('schemaForm').directive('sfMessage',
-['$injector', 'sfErrorMessage', function($injector, sfErrorMessage) {
+['sfErrorMessage', function(sfErrorMessage) {
   return {
     scope: false,
     restrict: 'EA',
-    link: function(scope, element, attrs) {
-
-      //Inject sanitizer if it exists
-      var $sanitize = $injector.has('$sanitize') ?
-                      $injector.get('$sanitize') : function(html) { return html; };
-
-      //Prepare and sanitize message, i.e. description in most cases.
-      var msg = '';
-      if (attrs.sfMessage) {
-        msg = scope.$eval(attrs.sfMessage) || '';
-        msg = $sanitize(msg);
-      }
-
-      var update = function(valid) {
-        if (valid && !scope.hasError()) {
-          element.html(msg);
-        } else {
-
-          var errors = Object.keys(
-            (scope.ngModel && scope.ngModel.$error) || {}
-          );
-
-          // We only show one error.
-          // TODO: Make that optional
-          var error = errors[0];
-
-          if (error) {
-            element.html(sfErrorMessage.interpolate(
-              error,
-              scope.ngModel.$modelValue,
-              scope.ngModel.$viewValue,
-              scope.form,
-              scope.options && scope.options.validationMessage
-            ));
-          } else {
-            element.html(msg);
-          }
-        }
-      };
-      update();
-
-      scope.$watchCollection('ngModel.$error', function() {
-        if (scope.ngModel) {
-          update(scope.ngModel.$valid);
-        }
+    template: '<div ng-if="!error && form.description" ng-bind-html="form.description"></div><div ng-if="error" ng-bind-html="error"></div>',
+    link: function(scope) {
+
+      scope.$watchCollection('ngModel.$error', function(errors) {
+
+        errors = Object.keys(errors);
+
+        // We only show one error.
+        // TODO: Make that optional
+        var error = errors[0];
+
+        scope.error = error ?
+          sfErrorMessage.interpolate(
+            error,
+            scope.ngModel.$modelValue,
+            scope.ngModel.$viewValue,
+            scope.form,
+            !!(scope.options && scope.options.validationMessage)
+          )
+          : null;
       });
 
     }