本地项目和 jsFiddle 上的 Angular 编译模板错误，但在 Plunker 中工作正常 [英] Angular compile template error on local project and jsFiddle, but working fine in Plunker
问题描述
我注意到我的 Angular 控制器正在增长，并且一直在尝试重构和使用指令和服务.
I've noticed my angular controller is growing and have been trying to refactor and use directives and services.
但是，在一种情况下，我正在尝试创建一个在 plunker 中似乎运行良好的指令，但是我在本地应用程序和 jsFiddle 中看到以下错误:
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 链接:http://plnkr.co/edit/e11zA8LKvoPTgTqW2HEE?p=preview
Plunker link: http://plnkr.co/edit/e11zA8LKvoPTgTqW2HEE?p=preview
jsFiddle 链接(在 Firebug 中可以看到错误):http://jsfiddle.net/oampz/8hQ3R/14/
jsFiddle link (error can be seen in 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>',
错误消失了，但自然不会产生预期的功能/输出.
The error disappears, however naturally the expected functionality/output will not be produced.
我对可能导致这种情况的原因感到困惑.
I'm confused at to what could cause this.
推荐答案
我严重认为这是 jsfiddle 造成的问题.任何像 jsfiddle 或 plunker 这样的服务在模拟真实设置的同时仍然提供嵌入式输出、外部文件加载等功能时会遇到麻烦.有些解决方案似乎比其他解决方案更好，虽然我长期以来一直是 jsfiddle 的忠实用户 -AngularJS 项目似乎在 plunker 中工作得更好，尤其是使用 angular 模板时，您可以在开始时选择.
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.
我认为您关于为什么它不起作用的问题实际上是关于为什么 jsfiddle 无法使其起作用的问题，尽管我不想用那没关系"来回答问题，但我认为你应该专注于解决你的问题而不是 jsfiddle 的问题，现在只使用另一个服务(比如 plunker);)
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 ;)
如果我猜测(通常对 SO 来说不是一个好主意)，我会说 jsfiddle 以某种方式弄乱了模板，可能在模板中添加了一个注释节点，打破了角度模板的一个根节点"要求.
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.
这篇关于本地项目和 jsFiddle 上的 Angular 编译模板错误，但在 Plunker 中工作正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
