I've noticed my angular controller is growing and have been trying to refactor and use directives and services.
However, on one scenario, i am trying to create a directive which appears to be working fine in plunker, however i am seeing the following error in my local application and in jsFiddle:
Error: [$compile:tplrt] http://errors.angularjs.org/1.2.8/$compile/tplrt?p0=getEmptyCells&p1=
Plunker link: http://plnkr.co/edit/e11zA8LKvoPTgTqW2HEE?p=preview
jsFiddle link (error can be seen in Firebug): http://jsfiddle.net/oampz/8hQ3R/14/
directive:
app.directive('getEmptyCells', function () {
return {
restrict: 'EA',
replace: true,
template: '<td ng-repeat="emptyCell in getEmptyCells(payments.Details.length)" class="empty">No Payment</td>',
scope: {
'payments' : '=getEmptyCells'
},
link: function (scope, elem, attr) {
scope.getEmptyCells = function (len) {
var emptyCells = [];
for (var i = 0; i < 12 - len; i++) {
emptyCells.push(i);
}
return emptyCells;
};
}
};
});
HTML:
<table>
<tr>With Directive:</tr>
<tr ng-repeat="payments in MyPayments">
<th>{{payments.name}}</th>
<td ng-repeat="paymentAmount in payments.Details.slice(0, 12)">{{ paymentAmount }}</td>
<td get-empty-cells="payments"></td>
</tr>
</table>
When i remove:
template: '<td ng-repeat="emptyCell in getEmptyCells(payments.Details.length)" class="empty">No Payment</td>',
The error disappears, however naturally the expected functionality/output will not be produced.
I'm confused at to what could cause this.