ng-bind-html with unsafe content

[Freyskeyd]

Hey,

I'm currently working on Angular 1.2.
I use backend to generate some complexe menu to display in my view.
I use angular to make binding and other much more easier, but when i want to include my complexe menu in my view, nothing work (ng-click..).

From server (sample example, menu is more complex):

[{
   name: "Item1",
   menu: "<ul><li><a href="#" ng-click="edit(1)"></li><li><a href="#" ng-click="remove(1)"></li></ul>"
}, {...}]

Ng-repeat on item:

<tr ng-repeat="value in serverProv">
    <td>{{value.name}}</td>
    <td ng-bind-html="value.menu"></td>
</tr>

ng-click is not fire and page reload when i click on edit or remove.
I don't know how to do it. How can i make a ng-bind-html-unsafe like?

Thank's

[Freyskeyd]

Yo,

i've build a directive:

angularApp.directive('compile', function($compile) {
  // directive factory creates a link function
  return function(scope, element, attrs) {
    scope.$watch(
      function(scope) {
        // watch the 'compile' expression for changes
        return scope.$eval(attrs.compile);
      },
      function(value) {
        // when the 'compile' expression changes
        // assign it into the current DOM
        element.html(value);

        // compile the new DOM and link it to the current
        // scope.
        // NOTE: we only compile .childNodes so that
        // we don't get into infinite loop compiling ourselves
        $compile(element.contents())(scope);
      }
    );
  };
});

It's working but if someone have a better solution...

[caitp]

If the html contains directives, I don't see what other solution there is. It would not be a very good idea for ng-bind-html to $compile potentially untrusted markup (and it's probably a bad idea anyways, I imagine it will be a headache tracking down all the places your app breaks when your supported directives change), but hey

[Freyskeyd]

Yep but building this complex menu is impossible on client side.

[btford]

@caitp is correct.

ng-bind-html should not call $compile. If you want this behavior (which is almost certainly a security issue), then you'll have to use your own directive.

[michaelkrog]

Your 'compile'-directive could have a whitelist of allowed tag-names and then remove those from the text that is not whitelisted before compiling.

[Freyskeyd]

Yeah a whitelist can be a good things