web-dev-qa-db-fra.com

Le modèle doit avoir exactement un élément racine avec la directive personnalisée replace: true

J'ai des problèmes avec une directive personnalisée avec replace: true,

http://jsbin.com/OtARocO/2/edit

Autant que je sache, je n'ai qu'un élément racine, mon, que se passe-t-il ici?

Error: Template must have exactly one root element. was: 
<tbody>
  <tr><td>{{ item.name }}</td></tr>
  <tr><td>row2</td></tr>
</tbody>

Javascript:

var app = angular.module("AngularApp", [])
  .directive('custom', [function () {
    return {
      restrict: 'E',
      replace: true,
      templateUrl: 'lineItem.html',
      link: function(scope, element, attrs) {

      }
    };
  }])
.controller('MyCtrl', ['$scope', function($scope) {
  $scope.items = [
    { 
      name: 'foo'
    },
    {
      name: 'bar'
    },
    {
      name: 'baz'
    }
  ];
}]);

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta name="description" content="Angular Avatar Example" />  

  <script src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body data-ng-app="AngularApp">
  <script type="text/ng-template" id="lineItem.html">
    <tbody>
      <tr><td>{{ item.name }}</td></tr>
      <tr><td>row2</td></tr>
    </tbody>
  </script>
  <div data-ng-controller="MyCtrl">
    <table>
      <custom data-ng-repeat="item in items"></custom>
    </table>
  </div>
</body>
</html>
angularjsangularjs-directive
12
RyanHirsch

Semble être un bug connu de AngularJs.

Ce que vous pouvez faire est de changer la restriction en attribut au lieu d'élément, supprimez la tbody du modèle et utilisez un <tbody custom ng-repeat="item in items"> dans votre code html.

Fondamentalement:

Votre modèle devient:

<tr><td>{{ item.name }}</td></tr>
<tr><td>row2</td></tr>

Votre directive:

return {
  restrict: 'A',
  templateUrl: 'lineItem.html',
  link: function(scope, element, attrs) {

  }
};

Et votre HTML:

<div data-ng-controller="MyCtrl">
  <table>
    <tbody custom data-ng-repeat="item in items"></tbody>
  </table>
</div>
19
Caio Cunha

Surveillez également les commentaires dans les modèles de directive! docs

Surveillez les commentaires HTML au début ou à la fin des modèles, car ils peuvent également causer cette erreur. Considérez le modèle suivant:

<div class='container'> 
 <div class='wrapper>
 ...
 </div> <!-- wrapper -->
</div> <!-- container -->

Le commentaire <!-- container --> est interprété comme un deuxième élément racine et rend le modèle invalide.

3
Golyo

Cette erreur peut également se produire avec une URL incorrecte vers un modèle (non existant). Voir https://stackoverflow.com/a/34284646/430885

0
Frederik Struck-Schøning

Assurez-vous que tous les éléments HTML qui seront répercutés/écrits sur la page ont été enveloppés dans une enveloppe. c'est-à-dire si mon modèle écrit une entrée de formulaire comportant une étiquette, une entrée [texte] et une étendue. N'oubliez pas de tout envelopper dans une div.

c'est à dire 

<div>
<label> My Directive Label</label>
<input type='text' ng-model='xyz' />
<span ng-class='errors'></span>
</div> <!-- the root element , the element that envelops everything-->

Une autre erreur que vous pouvez recevoir est peut-être "Objet chaîne non terminée", ce qui signifie que la chaîne de modèle n'a pas été correctement terminée - pour résoudre ce problème, il suffit d'inclure un caractère "\" à la fin de chaque saut de ligne, i.e

.
.
replace:true,
restrict:'ACE',
template : "<div> \
<label> My Directive Label</label> \
<input type='text' ng-model='xyz' /> \
<span ng-class='errors'></span> \
</div> \
",....
0
chitwarnold