web-dev-qa-db-fra.com

Le modèle de directive doit avoir exactement un élément racine

Je suis nouveau chez angularJs. J'essaie de créer une nouvelle directive qui contient un élément d'entrée et un bouton. Je veux utiliser cette directive pour effacer le texte saisi lorsque vous cliquez sur le bouton.

Lorsque j'utilise ma directive en HTML, je reçois une erreur ci-dessous:

Error: [$compile:tplrt] Template for directive 'cwClearableInput' must have exactly one root element.

html:

<div class="input-group">
         <cw-clearable-input ng-model="attributeName"></cw-clearable-input>
 </div>

clearable_input.js:

angular.module('cw-ui').directive('cwClearableInput', function() {
  return {
    restrict: 'EAC',
    require: 'ngModel',
    transclude: true,
    replace: true,
    template: '<input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span>',
    controller: function( $scope ) {

    }
};
});

Je ne suis pas capable de comprendre comment y parvenir. 

javascriptangularjsangularjs-directive
18
Vish021

Eh bien, l'erreur est assez explicite. Votre modèle doit avoir une seule racine et votre en a deux. Le moyen le plus simple de résoudre ce problème serait d’envelopper le tout dans une div ou une span

template: '<div><input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span></div>',

Avant:

<input type="text" class="form-control"/>
<span class="input-group-btn">
  <button type="button" class="btn" ng-click="" title="Edit">
    <span class="glyphicon-pencil"></span>
  </button>
</span>

Après:

<div>    <!--  <- one root   -->
  <input type="text" class="form-control"/>
  <span class="input-group-btn">
    <button type="button" class="btn" ng-click="" title="Edit">
      <span class="glyphicon-pencil"></span>
    </button>
  </span>
</div>
26
JLRishe

Cette erreur se produira également si le chemin d'accès au modèle est incorrect, auquel cas l'erreur est tout sauf explicative. 

Je faisais référence au modèle à partir de templates/my-parent-template.html avec le (incorrect) 

template-url = "sous-dossier/my-child-template.html"

J'ai changé cela en 

template-url = " templates / sous-dossier/my-child-template.html"

qui l'a résolu.

17
Frederik Struck-Schøning

Enveloppez simplement votre modèle dans quelque chose:

template: '<div><input type="text" class="form-control"/><span class="input-group-btn"><button type="button" class="btn" ng-click="" title="Edit"><span class="glyphicon-pencil"></span></button></span></div>',
5
Kostya Shkryob

Si vous ne voulez pas créer un seul élément racine, vous pouvez plutôt définir replace sur false. Dans votre directive, vous définissez la valeur sur true, qui remplace la balise de directive "cw-clearable-input" par l'élément racine de votre directive.

4
jgerstle

Si vous avez un commentaire dans votre modèle à côté de l'élément racine dans le modèle de directive, vous verrez la même erreur.

Par exemple. Si votre modèle de directive a un code HTML comme celui-ci (avec "replace" défini sur true dans la directive JS), vous verrez la même erreur.

<!-- Some Comment -->
<div>
   <p>Hello</p>
</div>

Par conséquent, pour résoudre ce problème dans les scénarios dans lesquels vous souhaitez conserver les commentaires, vous devez déplacer le commentaire afin qu’il se trouve dans l’élément racine du modèle.

<div>
   <!-- Some Comment -->
   <p>Hello</p>
</div>
1
ami91

Lorsque rien de tout cela ne fonctionnait pour moi, préfixer un / au chemin du modèle corrige le problème dans mon cas.

function bsLoginModal() {
        return {
            restrict: 'A',
            templateUrl:'/app/directives/bootstrap-login-modal/template.html',
            link: linkFunction,
            controller: SignInCtrl,
            controllerAs: 'vm'
        }
    }

au lieu de 

templateUrl:'app/directives/bootstrap-login-modal/template.html

Bonne chance.

0
Akash

Vérifiez votre template ou templateUrl 

templateUrl: 'some/url/here.html'

template: '<div>HTML directly goes here</div>'
0
KimchiMan