AngularJS: «Шаблон для директивы должен иметь ровно один корневой элемент» при использовании тега «th» в шаблоне директивы

Я встречал такие странности с элементами директивы и таблицы. См. Этот выпуск , например. Попробуйте обернуть ваш шаблон тегом div или используйте replace:false.

Это не ваш случай, но у меня возникла та же проблема, потому что мой код содержал html комментарии до и после разметки шаблона, например:

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

- проблема решена.

Я сталкивался с проблемой пару раз, и в большинстве случаев это может быть связано с тем, что вы не заключаете свои элементы в один элемент, например

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

, но был один случай, когда вы получали эту ошибку, когда неверный путь к шаблону. Поэтому, пожалуйста, проверьте, правильно ли вы ссылаетесь на шаблон.

Я получил эту ошибку, когда использовал свойство template определения директивы, когда мне следовало использовать templateUrl, если это кому-нибудь поможет.

Я сталкиваюсь со следующей ошибкой:

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

Я обхожу, удаляя комментарий в самом верху файла шаблона.

замена устарела с angularjs 1.3 вперёд, следующий релиз удалит её полностью, лучше не использовать клавишу замены.

Как утверждают другие: это потому, что ваш браузер игнорирует 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>

Я знаю, что это старо, но есть другое решение. Я также столкнулся с этой проблемой и безуспешно попробовал все вышеперечисленные решения.

оказывается, по какой-то странной причине, что эта ошибка возникает и в случае, если в 'templateUrl' есть опечатка - если angular не может найти html-файл по заданному пути - вы получите то же самое ' ошибка только одного корневого элемента.

так - исправление templateUrl исправило ошибку для меня.

надеюсь, что это поможет кому-нибудь в будущем.

Эта ошибка также может быть вызвана тем фактом, что вам нужно иметь элемент обертки для всех ваших тегов в шаблоне директивы. Шаблон вашей директивы не может быть только:

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

Он должен быть:

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

Какую версию angular вы используете?

Была ошибка для чего-то похожего на вашу проблему, которая была исправлена ​​в 1.2.13 1.3 Beta 1 commit link