1

I am using https://github.com/ivantage/angular-ivh-treeview/blob/master/docs/templates-and-skins.md#tree-layouts and having problems with HTML inside of labels or using a custom node field to bind to a ng-bind-html. So I tried making a custom directive to substitute the label field but I can't seem to get it to work.

Is there any way to get the label to bind as html using ng-sanitize so that I can put the html markup in the label?

James
  • 1,514
  • 12
  • 30

2 Answers2

1

If your labels already have HTML embedded in them the easiest thing to do would be to use the ivhTreeviewBfs service to walk your tree and explicitly trust each node's label with $sce.trustAsHtml. Then you can use ng-bind-html="trvw.lable(node)" in your templates as desired.

Here's a demo to illustrate: http://jsbin.com/bogoyu/2/edit?js,output

Note that it would also be possible to add conditions to your template based on node attributes (i.e. ng-class="{fancy: node.foo = '...'}" etc.) if you didn't want to put html right in your labels.

jtrussell
  • 695
  • 7
  • 15
  • Thanks again, this was very helpful. – James Feb 27 '16 at 02:18
  • what do you search then, when you filter? clearly one would most likely search the `label` property but if you now have HTML in there, that would jack your search, no? IMO, the better option is to override the node template (your second option above). – icfantv Mar 16 '16 at 02:52
1

In addition to Justin's great answer, you could use the ngSanitize module of angular to 'sanitize' html.

Just include angular-sanitize and put ngSanitize as dependency for your app module. Ex:

var app = angular.module("myApp", ['ngSanitize']);

Scope variables bound by using ng-bind-html are sanitized automatically. No need to traverse the tree or use $sce service

Abhishek
  • 143
  • 5
  • So the problem I ran into just using the auto sanitize is that inside of the treeview it wasn't doing it and not giving me any error messaging. I am not sure if it was a problem with ngSanitize or how the error handling was happening in the module itself but I was getting silent errors and couldn't figure out why. – James Mar 01 '16 at 16:41
  • @james Oops! Missed that point in your question. I'll try to edit the jsbin above and get back, with some success hopefully – Abhishek Mar 01 '16 at 16:46
  • I found that ngSanitize will remove 'style' and javascript or 'onclick' etc attributes from markup. Instead of 'style', 'class' can be utilized. For the alert, you might use a function from controller, called at ng-click (remember to use `data-ng-click` as per [this](http://stackoverflow.com/questions/22336933/injecting-ng-click-in-html-with-ngsanitize) stackoverflow post. – Abhishek Mar 01 '16 at 17:16