本地项目和 jsFiddle 上的 Angular 编译模板错误，但在 Plunker 中工作正常

Question

我注意到我的角度控制器正在增长，并且一直在尝试重构和使用指令和服务。

但是，在一种情况下，我正在尝试创建一个在 plunker 中似乎运行良好的指令，但是我在本地应用程序和 jsFiddle 中看到以下错误：

Error: [$compile:tplrt] http://errors.angularjs.org/1.2.8/$compile/tplrt?p0=getEmptyCells&p1=

Plunker 链接：http://plnkr.co/edit/e11zA8LKvoPTgTqW2HEE?p=preview

jsFiddle 链接（在 Firebug 中可以看到错误）：http://jsfiddle.net/oampz/8hQ3R/14/

指令：

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>

当我删除时：

template: '<td ng-repeat="emptyCell in getEmptyCells(payments.Details.length)" class="empty">No Payment</td>',

错误消失了，但自然不会产生预期的功能/输出。

我对可能导致这种情况的原因感到困惑。

Answer 1

我认真地认为这是 jsfiddle 造成的问题。像 jsfiddle 或 plunker 这样的任何服务在模拟真实设置时都会遇到麻烦，同时仍然提供嵌入式输出、外部文件加载等功能。有些解决方案似乎比其他解决方案更好，虽然我长期以来一直是 jsfiddle 的忠实用户 - AngularJS 项目似乎在 plunker 中工作得更好，尤其是在开始时可以选择 angular 模板。

我认为你关于为什么它不起作用的问题实际上是一个关于为什么 jsfiddle 不能使它起作用的问题，即使我不想用“那没关系”来回答问题，我认为你应该专注于解决你的问题而不是 jsfiddle 的问题，现在只使用其他服务（如 plunker）；）

编辑：如果我猜测（对于 SO 来说通常不是一个好主意），我会说 jsfiddle 以某种方式弄乱了模板，可能会在模板中添加一个注释节点，从而打破了角度模板的“一个根节点”要求。