指令在 <tr> 内不起作用那是 ng-repeat 绑定 [英] directive not working inside <tr> that is ng-repeat bound

问题描述

我有一个表格，其中的行通过 ng-repeat 重复.我正在尝试创建一个模板，为每行

I have a table where the rows are repeated via ng-repeat. I am trying to create a template that generates columns <td> for each row <tr>

app.directive("customtd", function(){
  return {
    restrict: 'E',
    template: "<td>{{position.Name}}</td><td>{{position.Code}}</td>",
    replace: true,
    scope: {
      position: '='
    }
  }
});

<table>
  <tr ng-repeat="p in positions">
    <customtd position="p"></customtd>
  </tr>
</table>

问题是我的自定义 td 模板根本没有呈现.在这里，我打算用 n 个 替换 - 这将根据我的数据对象上的属性数量决定，但在此刻我只是想让一个简单的指令工作，它将输出两列.

The issue is my custom td template is not rendered at all. Here I intend to replace <customtd> with n number of <td>s - which will be decided based on number of properties on my data object, but at the moment I am just trying to get a simple directive working that will output two columns.

MYPLUNKER :显示此问题的实例和指令代码.

MYPLUNKER : shows an instance of this issue and the directive code.

推荐答案

正如评论中所指出的，指令的模板应该有单个根元素.因此，我建议您将 tr 元素移动到指令的模板中，如下所示:http://plnkr.co/edit/YjLEDSGVipuKTqC2i4Ng?p=preview

As pointed out in comments the template of a directive should have single root element. So I would suggest you to move the tr element to the template of the directive, like this: http://plnkr.co/edit/YjLEDSGVipuKTqC2i4Ng?p=preview

这篇关于指令在 <tr> 内不起作用那是 ng-repeat 绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！