在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 。