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

试试这个

$('.table').trigger('footable_redraw');

也在 Angular 中，您应该使用scope: { products: '=' },代替{{ }}

Example

Answer 2

您也可以使用ng-bind =“{{variable name}}”代替{{}}作为td中的属性

将数组传递给ng-repeat项目中的指令

2 个答案: