Javascript AngularJS:'；指令的模板必须只有一个根元素'；使用'；th'；指令模板中的标记

我试图通过指令实现自定义

排序，以便使html表中的列可排序

HTML:

指令模板：

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

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

我做错了什么？
我在指令和表元素中遇到过类似的奇怪情况。看看这个例子。尝试使用
div
标记包装模板，或使用
replace:false
您使用的是哪个版本的angular

1.2.13 1.3 Beta 1中修复了一个类似于您的问题的bug

我预计
在
上下文之外进行评估时，它会在某个中间点融化（将该模板放入网页的某个随机部分，以看到
消失）

在您的位置上，我会在模板中使用
，将
排序依据指令
更改为'a'类型指令，并像以前一样使用
..
，而不使用其他人所说的
替换：true
：这是因为您的浏览器在将TH放入表中之前忽略它。我更喜欢的解决方法是将指令更改为属性指令，并将其添加到表中的TH

指令如下所示：

.directive('sortByDirective', function () {

    return {
        templateUrl: 'SortHeaderTemplate',
        restrict: 'A',
        transclude: true,
        replace: false,
        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);
            }
        }
    };
});

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

在页面上设置它如下所示：

.directive('sortByDirective', function () {

    return {
        templateUrl: 'SortHeaderTemplate',
        restrict: 'A',
        transclude: true,
        replace: false,
        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);
            }
        }
    };
});

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

{{header.title}
这不是您的情况，但我遇到了同样的问题，因为我的代码在模板标记前后都有html注释，如下所示：

<!-- Foo Widget -->
<div class="foo-widget">[...]</div>
<!-- end:: Foo Widget -->


[...]

我去掉了注释，问题解决了。
这个错误也可能是因为您需要为指令模板中的所有标记使用包装元素。指令的模板不能仅为：

<nav></nav>
<div></div>



它必须是：

<div>
 <nav></nav>
 <div></div>
</div>

我遇到以下错误：

Error: [$compile:tplrt] http://errors.angularjs.org/1.2.6/$compile/tplrt?p0=stockWidget&p1=stock.html.

我通过删除模板文件顶部的逗号来解决问题

angularjs 1.3 forward不推荐使用replace，下一版本将完全删除它，最好不要使用replace键
 我已经多次遇到这个问题，大多数情况下可能是您没有将元素包装在一个元素下，例如

<div>
  <div... </div>
</div>


当我使用指令定义的
template
属性时，我遇到了这个错误，而我本应该使用
templateUrl
，如果这对任何人都有帮助的话。
我知道这很旧，但还有另一个解决方案。
我也遇到了这个问题，并尝试了上述所有解决方案，但没有成功

事实证明，出于某种奇怪的原因，如果“templateUrl”中有输入错误，也会抛出此错误-如果angular无法通过给定的路径找到html文件，则会得到相同的“必须只有一个根元素”错误

所以-修复模板URL为我修复了错误

希望这对将来的任何人都有帮助。
我知道这是一个非常古老的答案和问题，但我遇到了这个错误，并通过将我的评论放在div标记中来修复它

之前：

    <!--You commented code-->
      <div>

      </div>



之后：

<div>
    <!--You commented code-->
</div>


更具体的情况是，当您认为自己有正确的模板路径而实际上没有时：正如
模板URL的中所述

URL是相对于我们的
index.html
文件的

在我的例子中，我将模板目录放在
index.html
下面一级。当我将属性设置为
templateUrl:'../templates/some form.html'
时，路径是相对于脚本的，而不是相对于
index.html
，导致了相同的错误。
当您认为自己拥有正确的模板路径而实际上没有时，添加到Biljana的答案中，特别是dos/mac/unix系统中的大小写差异

我的本地路径：

templateUrl:'ng/ImageDnd/dropzone.tpl.html'

我的真实道路：

ng/ImageDnD/dropzone.tpl.html

请注意注释ND末尾的D

我的Macbook没有抱怨，但在Linux中部署时出错了。
Diddo--
replace:true
对我来说是个难题。+1，将
replace:true
更改为
replace:false
对我有效，而我的
html
中甚至没有任何
th
td
元素对我有效，我将其作为一个菜单使用，其中有这样一个链接：
是的，这也是我的问题。谢谢这是我遇到的最疯狂的角度问题之一。非常感谢！在我的模板中添加包装器元素修复了这个问题。谢谢你的提示；0
replace:false
为mecan工作，我们可以使用replace:true和restrict类型E
<div>
    <!--You commented code-->
</div>