为什么ng-repeat的指令是从表中编译出来的？

Question

我在此代码中遇到问题

        <table class="turing-matrix">
            <state ng-repeat="state in mainCtrl.stateMatrix" fields="state.fields" state-name="state.stateName"></state>
        </table>

。为什么角度编译出这个表格？ ：

州指令代码：

angular.module('turingApp')
.directive('state', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'state.html',
        scope: {
            stateName: '=',
            fields: '='
        },
        link: function() {

        }
    }
});

指令模板：

<tr>
    <th>{{ stateName }}</th>
    <td>
        <field ng-repeat="field in fields" field="field"></field>
    </td>
</tr>

Answer 1

看似问题不是角度问题，而是浏览器进程无效的html。

您可以使用最简单的代码重现此问题

<table>
    <asd>123</asd>
    <asd>123</asd>
    <asd>123</asd>
</table>

所以，这里没有使用角度，但行为相同。

要解决此问题，您可以将指令限制转换为 A ，并将其用作属性

.directive('state', function() {
    return {
        restrict: 'A', 
        replace: true,
        templateUrl: 'state.html',
        scope: {
            stateName: '=',
            fields: '='
        },
        link: function() {
console.log('state',arguments);
        }
    }
})

并在 tr

上使用它

<table class="turing-matrix">
  <tr state ng-repeat="state in mainCtrl.stateMatrix" fields="state.fields" state-name="state.stateName"></tr>
</table>

<强> Sample on Plunkr