javascript - 将数组从 ng-repeat 项传递给指令

Question

我有以下指令:

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

        scope: {
            products: '@'
        },

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

模板是一个简单的表格:

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

并且在这段代码中使用了它:

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

entries 变量的一个例子是:

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
            }
        ]
    }
];

问题是:指令不识别 products 数组，并且不显示表格。

Answer 1

试试这个

scope: {
   products: '='
},

同样在 Angular 中你应该使用 {{ }}而不是 <% %>

Example