角度自定义指令模板行为

Question

I am having a problem with angular custom directives.

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>

This template is not rendering as 2 "TD" tags it is only rendering the "TD my-element" from the html with binded data inside.

If I change the template to

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

The page renders with 2 div "DIV" inside the "TD my-element"

If I make replace=false everything goes away.

Why is the TD acting different than the DIV

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

Answer 1

because you have replace false, it puts the template inside the container element. You can't have two <td> s inside a <td> , that's just invalid markup. But you can have two <divs> inside a <td> .

Answer 2

尝试按照以下步骤添加它。

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