AngularJS 错误:指令“XXXXXX"的模板必须只有一个根元素 [英] AngularJS error: Template for directive 'XXXXXX' must have exactly one root element

问题描述

这是这个问题.

我正在尝试使用多个 行构建 HTML

.我希望其中一些行由我的指令 myDirectiveA 呈现，而其他行由我的指令myDirectiveB"呈现.

您可以在下面看到我的文件的样子.如果文件 path/to/myDirectiveA.template.html 中只有一个

行，则一切正常.但是一旦我在那里添加另一行，我就会收到以下错误:

`angular.js:13920 错误:[$compile:tplrt] 指令myDirectiveA"的模板必须正好有一个根元素.path/to/myDirectiveA.template.html`

好的，所以如果我只允许在该模板文件中有一个根元素，那么我如何使用来自各种指令的多行构建我的表?其他人如何解决这个看似常见的用例?

这是我的文件:

ma​​in.html:

<tr my-directive-a a="mainCtrl.a"></tr></tbody>

app.js:

myApp.directive('myDirectiveA',function(){返回 {'替换':真的，'限制':'A'，'范围': {'a': '='},'控制器': 'MyDirectiveACtrl','controllerAs': 'MyDirectiveACtrl','bindToController': 真，'templateUrl': "path/to/myDirectiveA.template.html"};});myApp.controller('MyDirectiveACtrl', function($scope){var self = this;$scope.$watch(function() {return {'a': self.a};}, function (objVal) {},true);});

path/to/myDirectiveA.template.html:

<td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td><td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td></tr>

解决方案

在应用中使用这个

<tbody my-directive-a a="mainCtrl.a"></tbody>

和这个在指令模板中

<tr><td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td><td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td></tr><tr><td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td><td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td></tr></tbody>

它允许您在指令中只有一个根元素，并在其中添加多个 TR.

This is a follow-up to this question.

I am trying to build and HTML <table> with multiple <tr> rows. I want some of these rows to be rendered by my directive myDirectiveA and others to be rendered by my directive 'myDirectiveB'.

Below you can see what my files look like. It all works fine if there is only one <tr> row in the file path/to/myDirectiveA.template.html. But as soon as I add another row in there, I get the following error:

`angular.js:13920 Error: [$compile:tplrt] Template for directive 'myDirectiveA' must have exactly one root element. path/to/myDirectiveA.template.html`

Ok, so if I am allowed only to have one root element in that template file, then how can I construct my table with multiple rows from various directives? What is the way other people solve this seemingly-common use-case?

Here are my files:

main.html:

<div ng-controller="MainCtrl as mainCtrl">
  <table width="40%" border="1">
    <tbody>
      <tr my-directive-a a="mainCtrl.a"></tr>
    </tbody>
  </table>
</div>

app.js:

myApp.directive('myDirectiveA',function(){
  return {
    'replace': true,
    'restrict': 'A',
    'scope': {
      'a': '='
    },
    'controller': 'MyDirectiveACtrl',
    'controllerAs': 'MyDirectiveACtrl',
    'bindToController': true,
    'templateUrl': "path/to/myDirectiveA.template.html"
  };
});


myApp.controller('MyDirectiveACtrl', function($scope){
    var self = this;
    $scope.$watch(function() {return {'a': self.a};}, function (objVal) {},true);
  }
);

path/to/myDirectiveA.template.html:

<tr>
    <td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
    <td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>

解决方案

Use this in the app

<table width="40%" border="1">
  <tbody  my-directive-a a="mainCtrl.a">
  </tbody>
</table>

and this in the directive template

<tbody>
<tr>
    <td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
    <td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>
<tr>
    <td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
    <td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>
</tbody>

It allows you to have only one root element in your directive, and add more than one TR inside of it.

这篇关于AngularJS 错误:指令“XXXXXX"的模板必须只有一个根元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！