AngularJS：在指令模板使用'日'的标签，当'模板指令必须有一个根元素“ [英] AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template

问题描述

我想定制实施 sortBy 指令，以使在HTML表中的列排序。

I'm trying to implement custom sortBy directive in order to make columns in html table sortable.

HTML

<thead>
   <tr>
    <sort-by-directive
      ng-repeat="header in headers"
      onsort="onSort"
      sortdir="filterCriteria.sortDir"
      sortedby="filterCriteria.sortedBy"
      sortvalue="{{ header.value }}">{{ header.title }}
    </sort-by-directive>
  </tr>
</thead>

JS：

angular.module('mainApp.directives').directive('sortByDirective', function () {

        return {
            templateUrl: 'SortHeaderTemplate',
            restrict: 'E',
            transclude: true,
            replace: true,
            scope: {
                sortdir: '=',
                sortedby: '=',
                sortvalue: '@',
                onsort: '='
            },
            link: function (scope, element, attrs) {
                scope.sort = function () {
                    if (scope.sortedby == scope.sortvalue)
                        scope.sortdir = scope.sortdir == 'asc' ? 'desc' : 'asc';
                    else {
                        scope.sortedby = scope.sortvalue;
                        scope.sortdir = 'asc';
                    }
                    scope.onsort(scope.sortedby, scope.sortdir);
                }
            }
        };
    });

指令模板：

<script id="SortHeaderTemplate" type="text/ng-template">
<th ng-click="sort(sortvalue)">
  <span ng-transclude=""></span>
  <span ng-show="sortedby == sortvalue">
    <i ng-class="{true: 'sorting_asc', false: 'sorting_desc'}[sortdir == 'asc']"></i>
  </span>
  <span ng-show="sortedby != sortvalue">
    <i ng-class="{true: 'sorting', false: 'sorting'}[sortdir == 'asc']"></i>
  </span>
</th>
</script>

所以，当我使用个作为指令模板的根标签我找回了一个错误：

So when I use th as root tag of directive template I retrieve an error:

Error: [$compile:tplrt] Template for directive 'sortByDirective' must have exactly one root element. SortHeaderTemplate

但是当我换个到 A 或跨度标签一切工作正常。

but when I change th to a or span tags everything works fine.

我在做什么错了？

推荐答案

我想到的是，百分位＆GT; 是越来越融化掉一些中间点，当它被评估TR＆GT; （把这个模板到您的网页的一些随机的部分看到百分位＆GT; ＆LT的环境之外$ C>消失）。

I expect that the <th> is getting melted away at some intermediate point when it is evaluated outside the context of a <tr> (put that template into some random part of your webpage to see the <th> disappear).

在你的位​​置，我会用＆LT; D​​IV＆GT; 在模板中，将排序按指令到A型的指令，并使用百分位排序按指令＆GT; ...＆LT; /次＆GT; 像以前那样的没有的更换：真正的

In your position, I would use a <div> in the template, change sort-by-directive to an 'A' type directive, and use a <th sort-by-directive>...</th> as before, without replace: true.

这篇关于AngularJS：在指令模板使用'日'的标签，当'模板指令必须有一个根元素“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！