Question

我有以下页面

<body ng-controller="myController">
    <table>
        <tbody>
            <tr ng-repeat="r in rows">
                <div show-row></div>
            </tr>
        </tbody>
    </table>
</body>

使用以下Angular模块

ng.module('myModule', [ ])
    .controller('myController', ['$scope', function ($scope) {
        $scope.rows = [a non-empty array of values]
    }]).directive('showRow', function () {
        return {
            replace: true,
            template: '<td>Hello!</td>'
        };
    });

我的问题是Hello!在表格之前显示一次，而不是像我预期的那样，表格的每一行都显示一次。我想我必须使用指令的scope属性，但是如何？

Answer 1

问题在于div，它不能成为tr的子项。将div更改为td。

<body ng-controller="myController">
    <table>
        <tbody>
            <tr ng-repeat="r in rows">
                <td show-row></td>
            </tr>
        </tbody>
    </table>
</body>

Answer 2

我遇到与以下布局类似的问题：

<table>
    <table-header data="headers" order="order"></table-header>
    <tbody>
        <tr ng-repeat="...">
             ...
        </tr>
    </tbody>
</table>

tableHeader指令如下所示：

.directive('tableHeader', [function () {
return {
    restrict: 'E',
    replace: true,
    scope: {
        data: '=',
        order: '='
    },
    template: '\
        <thead><tr> \
            <th ng-repeat="header in ::data" \
                ng-click="orderBy(header)"> \
                {{:: header.name }} \
            </th> \
        </tr></thead>',
    link: function (scope, elem, attrs) {           
        scope.orderBy = function (header) {
            if (scope.order.by === header.prop) {
                scope.order.reverse = !scope.order.reverse;
            } else {
                scope.order.by = header.prop;
            }
        };
    }
};

奇怪的是，thead元素最终会从表中移出，而不是在内部。

修改：似乎记录在https://github.com/angular/angular.js/issues/7295。

中

Angular指令显示在错误的位置

2 个答案: