angular directive for tables: bind transcluded elements with ng-bind-html - angularjs

Question

I'm trying to write a generic table directive like this:
<h-table rows="customers">
<h-column field="Id">
<a ng-click="editCustomer(row.Id)">{{row.Id}}</a>
</h-column>
<h-column field="Name">
</h-column>
</h-table>
That will generate the following html:
<table>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
<td>
<a ng-click="editCustomer(1)">1</a>
</td>
<td>
Alexandre
</td>
</tr>
...
</table>
My h-table template is something like:
<script type="text/ng-template" id="hTableTemplate.html">
<div>
<div ng-transclude id="limbo" style="display: none"></div>
<table>
<tr>
<th ng-repeat="col in cols">{{col.field}}<th>
</tr>
<tr ng-repeat="row in rows">
<td ng-repeat="col in cols">
// Here I need to put the content of h-column directive
// if it exists, or just bind the value for the column
<span ng-bind-html="getContentOrValueFor(row, col)" />
</td>
</tr>
<table>
</div>
</script>
So I need to create two directives: h-table and h-column. The h-table directive uses a directive controller, that will be used by both directives.
The h-column directive will use this controller to add cols to the table and get value of a row/col.
So far, this is my directive's controller:
.controller("hTable", function ($scope, $element, $attrs, $compile) {
$scope.cols = [];
this.addCol = function (col) {
$scope.cols.push(col);
};
$scope.getContentOrValueFor = function (row, col) {
// MY PROBLEM IS HERE! I will explain below ...
return col.content && col.content.html() ? col.content.html() : row[col.field];
};
})
My h-column directive receives h-table's controller.
It uses transclude to get it content and save this content inside col object, to bind it after:
.directive("hColumn", function () {
return {
restrict: "E",
require: "^hTable",
transclude: true,
scope: {
field: "#",
},
link: function(scope, element, attrs, hTableController, transclude) {
var col = {};
col.field = scope.field;
col.content = transclude(); // <-- Here I save h-column content to bind after
hTableController.addCol(col);
...
}
};
})
And finally :) my h-table directive:
.directive("hTable", function () {
return {
restrict: "E",
scope : {
rows: "="
},
controller: "hTable",
require: "hTable",
replace: true,
transclude: true,
templateUrl: "hTableTemplate.html",
link: function(scope, element, attrs, hTableController) {
...
}
};
})
I need to put h-column's content inside the td tag. So, I call getContentOrValueFor function to get this content that was inside h-column's directive.
If there is no content, so I bind with the value for the field.
It works normally if the h-column's content is something like {{1+2+3}} (it will show me 6, that's ok).
But if this content is an html tag like:
test
I get the error "html.indexOf is not a function"
How can I achieve this??

Answer 1

Thats caused by not including ngSanatize i think. See : https://docs.angularjs.org/api/ng/directive/ngBindHtml