ng-bind-html does not process Angular directives in bound HTML

[zoechi]

Because ng-bind-html didn't support a custom NodeValidator I built my own bind-html directive but now injecting a NodeValidator is supported but
the bound HTML is not processed by Angular (any components, directives, ... are ignored)

In my custom bind-html I have the following code in set value after setInnerHtml to achieve this:

if(value != null) {
  _compiler(_element.childNodes, _directiveMap)(_injector, _element.childNodes);
}

Is this intentional that ng-bind-html doesn't do this?

[mhevery]

This is by design. I think you want ng-include https://docs.angulardart.org/#angular/angular.NgIncludeDirective

[zoechi]

But the include only loads from an URL not from for example a value provided by a controller.
I thought this was an oversight that ng-bind-html doesn't do this.

If you don't want to have this functionality in Angular by default I'm fine with this because it's easy to create a custom directive that does it.

[mhevery]

I see, yes in that case you need your own directive. We don't want to support this use case because it is inherently dangerous, since you can bind user input as HTML and execute it.

[zoechi]

Ok, thanks.

[jonaskello]

In AngularJS it seems possible to trust some specific html using something like $sce.trustAsHtml(...). I did not find this option in AngularDart. Is it possible to do something similar?

http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html

[zoechi]

@jonaskello you need to get NodeValidator from the injector and configure it

[jonaskello]

I can get the NodeValidator into the controller by constructor injection. But I am not sure how to configure it. NodeValidator iteself seems immutable. Can I use NodeValidatorBuilder and somehow replace the NodeValidator in the injector with a new NodeValidator?

[zoechi]

binding a new NodeValidator should work too
look at https://github.com/angular/angular.dart/pull/490/files#diff-8e3e7c19cf07b9e29ca7881d9384d4b9R21 (test examples at the bottom)

[jonaskello]

Ah, I understand it better now. I need to put it in the bootstrapping. I now have this:

class MyAppModule extends Module {
  MyAppModule() {
    var myValidator = new NodeValidatorBuilder.common()
      ..allowHtml5()
      ..allowImages()
      ..allowCustomElement('test-component', attributes: ['product-id']);
    value(NodeValidator, myValidator);
  }
}

Which seems to work. I was a bit confused by the comment at the top of NgBindHtml:

"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..."

https://github.com/angular/angular.dart/blob/2cab2d63ebb92dfeb6b2195853e1376661a95796/lib/directive/ng_bind_html.dart

Even tough I can get Angular to load the custom html tag for a component now it will not process it. I now understand this was actually what you were saying in the original post :-). It seems a bit strange that it is not possible to load a component dynamically out-of-the-box without a custom directive. I would consider this a common use-case but I am new to Angular so maybe I have not fully understood how to do things yet.

[zoechi]

@jonaskello It is a common question and I have also troubles to understand it. The workaround is not difficult after one understands how it is supposed to work though. Sorry for my short answers don't have much time currently.