在div中获取自定义指令

Question

我希望开始划分我的代码。 我从一个基本表开始，但是无法弄清楚该指令为何在其分配的容器上方输出。

我从一个简单的指令开始

var app= angular.module('myApp');

app.directive("productItem", function() {
    return {
        restrict: 'EA',
        replace: false,
        // transclude: true,
        scope: false,
        templateUrl: 'templates/tableWrapper.html'

    }
}); 

我已经按比例缩小了模板以开始。 所以我硬编码了一些值

<td>Bob </td>
<td>10006 </td>

我在分配的父div内附加标签

<table class="table table-striped"  >
    <tr>
      <th>Name</th> <th>Quantity</th> 
    </tr>
    <tr>

    <tr>
      <product-item></product-item>
    </tr>
  </table>

我最初以replace：true开始。假定更改product-item标签将采用表格并适合表格。 但是，模板适合放在桌子外面。

还与require：true我收到错误

Template for directive 'productItem' must have exactly one root element. templates/tableWrapper.html

根据我的阅读，当我希望产品适合产品表时，transclude会很有用。 因此，目前尚无济于事。

我试图参考这篇文章Angularjs templateUrl无法绑定ng-repeat内部的属性 。 但是，这是我开始动态创建数据时的下一步。

Answer 1

处理表行（ <tr>元素）内的内容时，存在错误/功能。 您不能在表行内指定自定义元素，否则，如您所见，它们将被移到表外。

而是使用属性样式的指令，如下所示：

...
restrict: 'A', // A for attribute only
...

然后在模板中执行以下操作：

<tr>
  <td product-item></td>
</tr>

这应该为您工作。

另外，请确保保持replace:false 。