javascript 角度指令表行问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18559271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Directive table rows issue
提问by Tracy Lauren
I am a beginner Angular programmer, but I am really close to understanding the directives.
我是一名初级 Angular 程序员，但我真的很接近理解指令。
I create a fiddle here, but I have never used fiddle before, and it is not quite rendering ...
我在这里创建了一个小提琴，但我以前从未使用过小提琴，而且它的渲染效果不是很好......
the tr-row is a directive. I am trying to loop through the data, and print a directive (row) per record. HTML:
tr-row 是一个指令。我正在尝试遍历数据，并为每条记录打印一个指令（行）。HTML：
<table ng-controller="fiddleCtrl">
<thead>
<th>id</th>
<th>name</th>
<th>description</th>
</thead>
<tbody>
<tr><tr-row ng-repeat="d in data" scdata="d"></tr-row></tr>
</tbody>
</table>
javascript:
javascript:
var myapp = angular.module('myApp', [])
.controller('fiddleCtrl', ['$scope', function ($scope) {
$scope.data = [
{ id: 1, name: 'Fred', description: 'not the best worker' },
{ id: 2, name: 'Wilma', description: 'Freds Wife'},
{ id: 3, name: 'Barney', description: 'Freds best friend'},
{ id: 4, name: 'Louise', description: 'Never heard of Fred'},
{ id: 5, name: 'Tracy', description: 'Some Chick'},
{ id: 6, name: 'Foo', description: 'Inventer of bar'}
];
}]).directive('trRow', function ($compile) {
return {
restrict: "E",
replace: true,
link: function (scope, element, attrs) {
scope.id = scope.d.id;
scope.name = scope.d.name;
scope.desc = scope.d.description;
var tmpl = '<tr ><td>{{id}}</td><td><strong>{{name}}</strong></td><td>{{desc}}</td></tr>';
element.html(tmpl).show();
//var e =$compile(tmpl)(scope);
//element.replaceWith(e);
var e = $compile(element.contents())(scope);
},
scope: {
d: "="
}
};
});
should be easy. (le sigh)
应该很容易。（叹息）
any help would be appreciated, I REALLY need to understand this.
任何帮助将不胜感激，我真的需要了解这一点。
What is happening in my code is the tr-row directive has replace the table. I get a list of them, (with a tr INSIDE of a tr-row element but there is no table to display them in. I know this means I am close, but I cant think of any new combinations to try.
我的代码中发生的是 tr-row 指令替换了表格。我得到了它们的列表（在 tr-row 元素的 tr INSIDE 中，但没有表格可以显示它们。我知道这意味着我很接近，但我想不出任何新的组合来尝试。
I just need a simple table with rows in it.
我只需要一个带有行的简单表格。
I appologise if this has been asked a million times, I seem to be unsure what to search for. I have tried so many things.
如果这已经被问了一百万次，我很抱歉，我似乎不确定要搜索什么。我已经尝试了很多东西。
回答by Murat ?orlu
Firstly, a tag name can't contain dash char. So you can't use tr-rowas tag name, but you can use it as attribute.
首先，标签名称不能包含破折号字符。所以你不能tr-row用作标签名称，但你可以将它用作属性。
Then, you can simply write a directive like that:
然后，您可以简单地编写这样的指令：
.directive('trRow', function () {
return {
template: '<tr><td ng-bind="row.id"></td><td><strong ng-bind="row.name"></strong></td><td ng-bind="row.description"></td></tr>'
};
});
And usage is like that:
用法是这样的：
<tbody>
<tr tr-row ng-repeat="row in data"></tr>
</tbody>
A working example in fiddle: http://jsfiddle.net/T7k83/85/
小提琴中的一个工作示例：http: //jsfiddle.net/T7k83/85/
回答by Icycool
Actually this problem is specific to <table>elements.
实际上这个问题是特定于<table>元素的。
Browser parsing engines don't like invalid tags inside <table>so they will try to throw your directive out of the table (you can see that by inspecting the element), before your directive has a chance to replace itself with valid elements. This applies even if your directive doesn't contain dash in the name.
浏览器解析引擎不喜欢内部的无效标签，<table>因此在您的指令有机会用有效元素替换自身之前，它们会尝试将您的指令从表中抛出（您可以通过检查元素看到这一点）。即使您的指令在名称中不包含破折号，这也适用。
The way to solve this would be using directive type Ainstead of type E, which is suggested by @MuratCorlu.
解决这个问题的方法是使用指令 typeA而不是 type E，这是@MuratCorlu 建议的。
For other elements such as <div>, you can pretty much replace it with custom tags with names containing dash. For example ng-repeatcan be used as a tag.
对于其他元素，例如<div>，您几乎可以将其替换为名称中包含破折号的自定义标签。例如ng-repeat可以用作标签。
