feat(ng_bind_html): ng-bind-html directive to innerHTML an expression

Closes dart-archive#116

Author: chirayuk

lib/directives/all.dart

@@ -4,6 +4,7 @@ import '../bootstrap.dart';
 
 import 'ng_mustache.dart';
 import 'ng_bind.dart';
+import 'ng_bind_html.dart';
 import 'ng_class.dart';
 import 'ng_events.dart';
 import 'ng_cloak.dart';
@@ -20,6 +21,7 @@ import 'ng_switch.dart';
 
 export 'ng_mustache.dart';
 export 'ng_bind.dart';
+export 'ng_bind_html.dart';
 export 'ng_class.dart';
 export 'ng_events.dart';
 export 'ng_cloak.dart';
@@ -39,6 +41,7 @@ void registerDirectives(AngularModule module) {
   module.directive(NgTextMustacheDirective);
   module.directive(NgAttrMustacheDirective);
   module.directive(NgBindAttrDirective);
+  module.directive(NgBindHtmlAttrDirective);
   module.directive(NgClassAttrDirective);
   module.directive(NgClassOddAttrDirective);
   module.directive(NgClassEvenAttrDirective);

lib/directives/ng_bind_html.dart

@@ -0,0 +1,39 @@
+library angular.directive.ng_bind_html;
+
+import 'dart:html' as dom;
+import '../dom/directive.dart';
+
+/**
+ * Creates a binding that will innerHTML the result of evaluating the
+ * `expression` bound to `ng-bind-html` into the current element in a secure
+ * way.  This expression must evaluate to a string.  The innerHTML-ed content
+ * will be sanitized using a default [NodeValidator] constructed as `new
+ * dom.NodeValidatorBuilder.common()`.  In a future version, when Strict
+ * Contextual Escaping support has been added to Angular.dart, this directive
+ * will allow one to bypass the sanitizaton and innerHTML arbitrary trusted
+ * HTML.
+ *
+ * Example:
+ *
+ *     <div ng-bind-html="htmlVar"></div>
+ */
+@NgDirective(
+  selector: '[ng-bind-html]',
+  map: const {'ng-bind-html': '=.value'})
+class NgBindHtmlAttrDirective {
+  // The default HTML sanitizer.  Eventually, we'll make this configurable or
+  // use an optionally loaded `$sanitize` service.
+  static final dom.NodeValidator validator = new dom.NodeValidatorBuilder.common();
+
+  dom.Element element;
+
+  NgBindHtmlAttrDirective(dom.Element this.element);
+
+  /**
+   * Parsed expression from the `ng-bind-html` attribute.  The result of this
+   * expression is innerHTML'd according to the rules specified in this class'
+   * documention.
+   */
+  set value(value) => element.setInnerHtml((value == null ? '' : value.toString()),
+                                           validator: validator) ;
+}

test/directives/ng_bind_html_spec.dart

@@ -0,0 +1,23 @@
+library ng_bind_html_spec;
+
+import '../_specs.dart';
+import '../_test_bed.dart';
+import 'dart:html' as dom;
+
+main() {
+  describe('BindHtmlDirective', () {
+    TestBed _;
+
+    beforeEach(beforeEachTestBed((tb) => _ = tb));
+
+    it('should sanitize and set innerHtml and sanitize and set html',
+          inject((Scope scope, Injector injector, Compiler compiler) {
+      var element = $('<div ng-bind-html="htmlVar"></div>');
+      compiler(element)(injector, element);
+      scope.htmlVar = '<a href="http://www.google.com"><b>Google!</b></a>';
+      scope.$digest();
+      // Sanitization removes the href attribute on the <a> tag.
+      expect(element.html()).toEqual('<a><b>Google!</b></a>');
+    }));
+  });
+}