Getting custom directive inside div

Question

I am looking to start compartmentalizing my code. I am starting with a basic table, but cannot figure out why the directive is outputting above its assigned container.

I am starting with a simple directive

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

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

    }
}); 

I have scaled down my template to start. So I hardcoded some values

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

Inside of an assigned parent div I am attaching the tag

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

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

I initially started with replace: true Assuming that changing product-item tag would take form and fit inside the table. However, The template is fitting outside of the table.

Also with require: true I get an error

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

From what I read transclude would be useful when I want the product item to fit inside the product table. So for now it is not going to help.

I tried to reference this post Angularjs templateUrl fails to bind attributes inside ng-repeat. However, it is more form my next steps of when i start creating data dynamically.

Answer 1

There is a bug/feature when dealing with content inside of table rows (<tr> elements). You cannot specify custom elements inside of table rows, or else they will be moved outside of the table, as you are seeing.

Instead, use your directive in attribute style, like this:

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

And in your template, do something like this:

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

This should work for you.

Also, make sure that you keep replace:false.