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

Answer 2

你将产生无效的标记，因为你将在'td'中添加'td'..

将替换为'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>

Answer 3

here is the sample我答应了你。

如果您仍有疑问，请不要犹豫！

你也可以在类中使用hasStatus范围变量。

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

这有点帮助吗？

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

3 个答案: