I am currently working on creating a directive for a large set of repeated HTML code that involves using tables and table data cells. Although I have experience creating directives for div elements in the past, this is my first attempt at incorporating them into <table> / <td> elements.
Here is an example of the HTML structure:
<div ng-repeat="entries in Categories">
<table>
<tbody>
<tr ng-repeat="history in entries.InfoEntries">
<th>
{{ history.Name }}
</th>
<td ng-repeat="status in history.History.slice(0, 12) track by $index">
<span ng-switch="status">
<span ng-switch-when="0"></span>
<span ng-switch-when="U">U</span>
<span ng-switch-when="D">D</span>
<span ng-switch-default></span>
</span>
</td>
</tr>
</tbody>
</table>
<!-- More similar table structures here -->
</div>
The only thing that varies between these tables is the range of values used in the .slice function. To incorporate this variability into my directive, I plan to pass in the start and end ranges as attributes:
<td history-status slice-start='0' slice-end='12'></td>
This is what my directive looks like:
app.directive('historyStatus', function () {
return {
restrict: 'A',
replace: false,
transclude: true,
template: '<td ng-repeat="status in history.History.slice(sliceStart, sliceEnd) track by $index">' +
'<span ng-switch="status">' +
'<span ng-switch-when="U">U</span>' +
'<span ng-switch-when="D">D</span>' +
'<span ng-switch-default></span>' +
'</span>' +
'</td>',
scope: {
sliceStart: '=sliceStart',
sliceEnd: '=sliceEnd'
}
};
});
Despite implementing the above directive, I am not seeing any output rendered on the page, and there are no error messages being displayed in the browser console.