How can I evaluate string expressions in an object passed to a directive? I've reviewed various solutions but couldn't make it work as expected:
Compiling dynamic HTML strings from database
Dynamically add directive in AngularJS
How to get evaluated attributes inside a custom directive
Here is the main code snippet:
http://plnkr.co/edit/b2FblYElVGnzZRri34e0?p=preview
I'm specifically focusing on evaluating the {{units}} within the reportData object. I attempted using the $compile service without success. Any help would be appreciated!
.js:
var App = angular.module('plunker', [])
.controller("testCtrl", function($scope){
$scope.units = "Houses";
mockreport = {"COLUMNS":["People","Units"],"DATA":[[101,"{{units}}"],[100,"test 2"]]};
$scope.reportData = mockreport;
})
.directive('testdirective', function($compile,$parse,$interpolate){
return{
restrict : 'E',
scope:{
units:'@',
reportData:'='
},
templateUrl:'table.html',
link: function (scope, $el, attrs) {
curHtml = $el.html();
recompiledHtml = $compile(curHtml)(scope);
//$el.html('');
//$el.append(recompiledHtml);
}
};
});
index.html:
<div data-ng-controller="testCtrl">
<div class="panel panel-default">
<testdirective report-data="reportData" units="{{units}}">
</testdirective>
</div>
</div>
table.html:
<h4>units: {{units}}</h4>
<table>
<thead>
<tr>
<th data-ng-repeat="header in reportData.COLUMNS" data-ng-class="header">{{header}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="column in reportData.DATA">
<td data-ng-repeat="val in column">{{val}}</td>
</tr>
</tbody>
</table>