Question

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

JS

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

Answer 1

因为你替换了false，所以它将模板放在容器元素中。 <td>内不能有两个<td>，这只是无效的标记。但您可以在<divs>内有两个<td>。

Answer 2

尝试按以下方式添加..

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

Angular Custom Directive模板行为

2 个答案: