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

问题描述

我正在尝试实现自定义 sortBy 指令，以使 html 表中的列可排序.

HTML:

<tr><按指令排序ng-repeat="标题中的标题"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 () {返回 {templateUrl: 'SortHeaderTemplate',限制:'E'，转置:真实，替换:真的，范围: {排序目录: '=',排序依据:'=',排序值:'@',排序:'='},链接:函数(范围、元素、属性){scope.sort = 函数 () {if (scope.sortedby == scope.sortvalue)scope.sortdir = scope.sortdir == 'asc' ?'desc' : 'asc';别的 {scope.sortedby = scope.sortvalue;scope.sortdir = 'asc';}scope.onsort(scope.sortedby, scope.sortdir);}}};});

指令模板:

所以当我使用 th 作为指令模板的根标签时，我检索到一个错误:

错误:[$compile:tplrt] 指令sortByDirective"的模板必须正好有一个根元素.排序头模板

但是当我将 th 更改为 a 或 span 标签时，一切正常.

我做错了什么?

解决方案

我希望 在某个中间点消失，当它在 <的上下文之外进行评估时code><tr>(将该模板放入网页的某个随机部分以查看 消失).

在您的位置，我会在模板中使用

，将 sort-by-directive 更改为 'A' 类型指令，并使用... 和以前一样，没有 replace: true.

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);
                }
            }
        };
    });

Directive Template:

<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

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

What am I doing wrong?

解决方案

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).

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:在指令模板中使用“th"标签时，“指令模板必须正好有一个根元素"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！