AngularJS-使用指令生成<td>不起作用

AngularJS - Using a directive to produce a <td> not working

本文关键字：lt gt 不起作用 td 指令 AngularJS-      更新时间：2023-09-26

我有一大组重复的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'
    }
  };
});

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

我认为问题是你已经隔离了指令的范围，这意味着你需要显式地将"历史"传递到那里：

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: '='
    }

您将生成一个无效的标记，因为您将在"td"中添加一个"td"。。

将replace设置为true。plkr：http://plnkr.co/edit/hk9GJ7tiL0VANhcSiBax?p=preview

<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script>
  angular.module("ng").directive('historyStatus', function () {
    return {
        restrict: 'A',
        replace: true,
        template:   '<td ng-repeat="status in datasrc 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',
            datasrc: '=datasrc'
        }
      };
    }).run(function($rootScope){
    });
</script>
</head>
<body ng-app>
  <table ng-init="datasrc=['1','2','3','4','U','A']">
    <tbody>
      <tr>
        <td datasrc="datasrc" history-status slice-status-history-start-range='0' slice-status-history-end-range='12'></td>
      </tr>
    </tbody>
</table>
</body>

这是我答应给你的样本。

如果你还有问题，请毫不犹豫地问！

您也可以在类中使用hasStatus作用域变量。

   <span> {{ "UD123456".indexOf(status)>-1 ? status : '-' }}</span>

这有帮助吗？

相关文章：