Passing an array to a directive from a ng-repeat item

Question

I have the following directive:

var productsTable = function() {
    return {
        restrict: 'E',

        scope: {
            products: '@'
        },

        templateUrl: '../js/app/templates/products_table.html'
    };
};

The template is a simple table:

<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="product in products track by $index">
            <td><% product.id %></td>
            <td><% product.name %></td>
            <td><% product.quantity %></td>
        </tr>
    </tbody>
</table>

And it is used inside this piece of code:

<div ng-controller="MainController">
    <div ng-repeat="entry in entries">
        <products-table products="entry.products"></products-table>
    </div>
</div>

An example of the entries variable would be:

var entries = [
    {
        id: 1,
        products: [
            {
                id: 1001,
                name: 'Product 1',
                quantity: 30
            },
            {
                id: 1002,
                name: 'Product 2',
                quantity: 3
            }
        ]
    },
    {
        id: 2,
        products: [
            {
                id: 3001,
                name: 'Product 3',
                quantity: 450
            }
        ]
    }
];

The problem is: the directive does not recognize the products array, and does not show the table.

oh yes, I just gave an example of the array. The `entries` array is inside a controller... — Victor Leal, Oct 21 '15 at 12:47
"It does not show the table"? Do you mean the template isn't loaded at all, or that the data in the table is not displayed? If the former, have you registered your directive in your module? — Patrick, Oct 21 '15 at 12:58

Oleksandr T. · Accepted Answer · 2015-10-21T17:25:58.547

2

Try this

scope: {
   products: '='
},

also in Angular you should use {{ }} instead of <% %>

Example

edited Oct 21 '15 at 17:25

answered Oct 21 '15 at 12:41

Oleksandr T.

76,493
17
173
144

I've got the point here: http://stackoverflow.com/questions/14050195/angularjs-what-is-the-difference-between-and-in-directive-scope – Victor Leal Oct 21 '15 at 18:41

score 0 · Answer 2 · answered Mar 19 '17 at 08:26

0

You can also use ng-bind="{{variable name}}" in place of {{}} as an attribute in td

answered Mar 19 '17 at 08:26

Hari Prasad Sharma

435
6
14

Passing an array to a directive from a ng-repeat item

2 Answers2