Angular compile template error on local project an

Question

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.

Answer 1

I seriously think that it is a problem that jsfiddle creates. Any service like jsfiddle or plunker will have trouble emulating a real setup while still providing features like embedded output, external file loading etc. Some solutions just seem to work better than others, and while i've been a loving user of jsfiddle for long - AngularJS projects just seem to work a lot better in plunker, especially with the angular template you can select at the start.

I think your question as to why it doesn't work is really a question of why jsfiddle can't make it work, and even though i'd hate to answer a question with "That doesn't matter", i think you should focus on solving your problems and not jsfiddle's problem and just use another service (like plunker) for now ;)

EDIT: If i were to guess (generally not a good idea for SO) i'd say jsfiddle somehow messes up the template adding perhaps a comment node to the template, breaking the "one rootnode" requirement for an angular template.