javascript - AngularJS - 使用指令生成 不起作用

Question

我有一大堆重复的 HTML，我正在尝试为其创建指令。我过去创建过指令，主要是在 DIV 上，但这是第一次尝试 <table>/<td> .

HTML:

<div ng-repeat="entries in Categories">
    <table>
        <tbody>
            <tr ng-repeat="history in entries.InfoEntries">
                <th>
                    {{ history.Name }}
                </th>
                <!-- Trying to produce directive of this <td> -->
                <td ng-repeat="status in history.History.slice(0, 12) track by $index">
                    <span ng-switch="status">
                        <span ng-switch-when="0"></span>
                        <span ng-switch-when="U">U</span>
                        <span ng-switch-when="D">D</span>
                        <span ng-switch-when="1">1</span>
                        <span ng-switch-when="2">2</span>
                        <span ng-switch-when="3">3</span>
                        <span ng-switch-when="4">4</span>
                        <span ng-switch-when="5">5</span>
                        <span ng-switch-when="6">6</span>
                        <span ng-switch-default></span>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>

    <table>
        <tbody>
            <tr ng-repeat="history in entries.InfoEntries">
                <th>
                    {{ history.Name }}
                </th>
                <!-- Trying to produce directive of this <td> -->
                <td ng-repeat="status in history.History.slice(12, 24) track by $index">
                    <span ng-switch="status">
                        <span ng-switch-when="0"></span>
                        <span ng-switch-when="U">U</span>
                        <span ng-switch-when="D">D</span>
                        <span ng-switch-when="1">1</span>
                        <span ng-switch-when="2">2</span>
                        <span ng-switch-when="3">3</span>
                        <span ng-switch-when="4">4</span>
                        <span ng-switch-when="5">5</span>
                        <span ng-switch-when="6">6</span>
                        <span ng-switch-default></span>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>

    <table>
        <tbody>
            <tr ng-repeat="history in entries.InfoEntries">
                <th>
                    {{ history.Name }}
                </th>
                <!-- Trying to produce directive of this <td> -->
                <td ng-repeat="status in history.History.slice(24, 36) track by $index">
                    <span ng-switch="status">
                        <span ng-switch-when="0"></span>
                        <span ng-switch-when="U">U</span>
                        <span ng-switch-when="D">D</span>
                        <span ng-switch-when="1">1</span>
                        <span ng-switch-when="2">2</span>
                        <span ng-switch-when="3">3</span>
                        <span ng-switch-when="4">4</span>
                        <span ng-switch-when="5">5</span>
                        <span ng-switch-when="6">6</span>
                        <span ng-switch-default></span>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

从上面可以看出，这是唯一与 <table> 相比发生变化的事情。上面是 .slice 中的值范围- 所以我将通过以下方式将它们传递到我的指令中:

<td history-status slice-status-history-start-range='0' slice-status-history-end-range='12'></td>

我的指令:

app.directive('historyStatus', function () {
return {
    restrict: 'A',
    replace: false,
    transclude: true,
    template:   '<td ng-repeat="status in history.History.slice(sliceStartRange, sliceEndRange) track by $index">' +
                    '<span ng-switch="status">' +                            
                        '<span ng-switch-when="U">U</span>' +
                        '<span ng-switch-when="D">D</span>' +
                        '<span ng-switch-when="1">1</span>' +
                        '<span ng-switch-when="2">2</span>' +
                        '<span ng-switch-when="3">3</span>' +
                        '<span ng-switch-when="4">4</span>' +
                        '<span ng-switch-when="5">5</span>' +
                        '<span ng-switch-when="6">6</span>' +
                        '<span ng-switch-default></span>' +
                    '</span>' +
                '</td>',
    scope: {
        sliceStartRange: '=sliceStatusHistoryStartRange',
        sliceEndRange: '=sliceStatusHistoryEndRange'
    }
  };
});

通过上述内容，指令不会显示任何结果，控制台中也不会出现任何错误。

Answer 1

我认为问题是你已经隔离了指令的范围，这意味着你需要在那里显式传递“历史”:

HTML:

<td history-status history="history" slice-status-history-start-range='0' slice-status-history-end-range='12'></td>

在您的指令中:

scope: {
        sliceStartRange: '=sliceStatusHistoryStartRange',
        sliceEndRange: '=sliceStatusHistoryEndRange',
        history: '='
    }