Merge pull request #14 from Textalk/feature/sanitationServices

Support HTML in titles and descriptions

Author: davidlgj

dist/bootstrap-decorator.min.js

@@ -118,7 +118,7 @@ <h3>Schema</h3>
       },
       "soul": {
         "title": "Terms Of Service",
-        "description": "I agree to sell my undying soul",
+        "description": "I agree to sell my undying <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'>soul</a>",
         "type": "boolean",
         "default": true,
       },
@@ -192,7 +192,13 @@ <h3>Schema</h3>
       ]
     },
     { key: "date", minDate: "2014-06-20" },
-    { key: "radio", type: "radios" },
+    { key: "radio",
+      type: "radios",
+      titleMap: {
+        "Transistor": "Transistor <br> Not the tube kind.",
+        "Tube": "Tube <br> The tube kind."
+      }
+    },
     { key: "radiobuttons", type: "radiobuttons" },
     {
       type: 'actions',

examples/bootstrap-example.html

@@ -5,8 +5,8 @@
            ng-model="$$value$$"
            schema-validate="form.schema"
            ng-required="form.required">
-    {{form.title}}
+    <span ng-bind-html="form.title"></span>
   </label>
 
-  <span class="help-block" ng-show="form.description">{{form.description}}</span>
+  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
 </div>

src/directives/decorators/bootstrap/checkbox.html

@@ -6,9 +6,9 @@
              sf-changed="form"
              ng-model="checkboxValues[value]"
              ng-change="$$value$$ = checkboxValuesToList(checkboxValues)" >
-      {{name}}
+      <span ng-bind-html="form.name"></span>
     </label>
 
   </div>
-  <span class="help-block" ng-show="form.description">{{form.description}}</span>
+  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
 </div>

src/directives/decorators/bootstrap/checkboxes.html

@@ -12,5 +12,5 @@
   <span ng-if="form.feedback !== false"
         class="form-control-feedback"
         ng-class="evalInScope(form.feedback) || {'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"></span>
-  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>
+  <div class="help-block" ng-show="form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
 </div>

src/directives/decorators/bootstrap/default.html

@@ -9,8 +9,8 @@
              style="display: none;"
              ng-model="$$value$$"
              ng-value="value">
-      {{name}}
+      <span ng-bind-html="name"></span>
     </label>
   </div>
-  <span class="help-block" ng-show="form.description">{{form.description}}</span>
+  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
 </div>

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

@@ -6,8 +6,8 @@
              sf-changed="form"
              ng-model="$$value$$"
              ng-value="value">
-      {{name}}
+      <span ng-bind-html="name"></span>
     </label>
   </div>
-  <span class="help-block" ng-show="form.description">{{form.description}}</span>
+  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
 </div>

src/directives/decorators/bootstrap/radios.html

@@ -2,5 +2,5 @@
   <label ng-show="showTitle()">{{form.title}}</label>
   <input ng-if="form.type !== 'textarea'" type="text" disabled class="form-control" value="{{$$value$$}}">
   <textarea ng-if="form.type === 'textarea'"  disabled class="form-control">{{$$value$$}}</textarea>
-  <span class="help-block" ng-show="form.description">{{form.description}} </span>
-</div>
+  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
+</div>

src/directives/decorators/bootstrap/readonly.html

@@ -9,5 +9,5 @@
           ng-required="form.required"
           ng-options="val as form.titleMap[val] for val in form.schema.enum">
   </select>
-  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}} </span>
+  <div class="help-block" ng-show="form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
 </div>

src/directives/decorators/bootstrap/select.html

@@ -8,5 +8,5 @@
   <span ng-if="form.feedback !== false"
         class="form-control-feedback"
         ng-class="evalInScope(form.feedback) || { 'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"></span>
-  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}} </span>
+  <div class="help-block" ng-show="form.description" ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
 </div>