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中工作得更好，特别是你可以在开始时选择的角度模板。

我认为你关于它为什么不起作用的问题实际上是为什么jsfiddle无法使其发挥作用的问题，即使我讨厌回答“那无关紧要”的问题，我认为你应该专注于解决你的问题，而不是jsfiddle的问题，现在就使用其他服务（如plunker）;）

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

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

1 个答案: