Angular 自定义指令模板行为答案

【问题标题】：Angular Custom Directive template behaviorAngular 自定义指令模板行为
【发布时间】：2014-02-05 19:22:13
【问题描述】：

我遇到了角度自定义指令的问题。

app.directive('myElement', function () {
    return {
        scope: {
          item: '=i'
        },
        restrict: 'EA',
        replace: false,
        template: '<td>Name: {{ item.name }}</td> <td>Age: {{ item.age }}</td>'
    };

HTML

  <div ng-controller="MyCtrl">
<table class="table table-hover" border=1>
    <tr ng-repeat="p in people">
      <td my-element i="p"></td>
    </tr>
</table>

此模板不呈现为 2 个“TD”标签，它仅呈现来自 html 的“TD my-element”，其中包含绑定数据。

如果我将模板更改为

template: '<div>Name: {{ item.name }}</div> <div>Age: {{ item.age }}</div>'

页面在“TD my-element”内以 2 div“DIV”呈现

如果我让 replace=false 一切都消失了。

为什么 TD 的行为与 DIV 不同

http://jsbin.com/iMezAFa/168/edit

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

因为你有replace false，它把模板放在容器元素中。 <td> 内不能有两个 <td>s，这只是无效标记。但是您可以在 <td> 中包含两个 <divs>。

【讨论】：

好吧，我的脸红了。谢谢，我曾经有过这样的想法，但专注于错误的部分。

【解决方案2】：

尝试如下添加..

template: '<table><tr><td>Name: {{ item.name }}</td> <td>Age: {{ item.age }}</td></tr></table>'

【讨论】：

是的，这会将整个表格放入 <td> 中，这很奇怪，而且可能比仅使用 <divs> 或其他东西效率低很多。
这会在模板中移动 ng-repeat，这并不是我真正想要的。