Angular compile template error on local project an

2019-09-06 01:51发布

问题:

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.

回答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.