Comment utiliser `replace` de la définition de directive?

Question

Dans le présent document: http://docs.angularjs.org/guide/directive il dit qu'il y a un replace configuration de directives:

modèle - remplacer l'élément en cours avec le contenu de l'HTML. Le processus de remplacement migre tous les attributs / classes de l'ancien élément de la nouvelle. Voir la Création de Composants section ci-dessous pour plus d'informations.

code javascript

app.directive('myd1', function(){
  return {
    template: '<span>directive template1</span>',
    replace: true
  }
});

app.directive('myd2', function(){
  return {
    template: '<span>directive template2</span>',
    replace: false
  }
});

code html

<div myd1>
  original content should be replaced
</div>
<div myd2>
  original content should NOT be replaced
</div>

Mais la dernière page est à la recherche comme:

directive template1
directive template2

Il semble que l' replace ne fonctionne pas. Dois-je raté quelque chose?

Démonstration en direct: http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

Answer 1

Vous êtes de se confondre avec l' transclude: true, ce qui permettrait d'ajouter le contenu intérieur.

replace: true signifie que le contenu de la directive modèle va remplacer l'élément que la directive est déclaré, dans ce cas, l' <div myd1> balise.

http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=preview

Par exemple , sans replace:true

<div myd1><span class="replaced" myd1="">directive template1</span></div>

et avec replace:true

<span class="replaced" myd1="">directive template1</span>

Comme vous pouvez le voir dans le dernier exemple, la balise div est en effet remplacé.

Answer 2

Comme l'indique la documentation, "remplacer" détermine si l'élément actuel est remplacé par la directive. L’autre option consiste à savoir s’il est simplement ajouté comme enfant. Si vous regardez la source de votre plnkr, notez que pour la deuxième directive où replace est false, la balise div est toujours là. Pour la première directive, ce n'est pas le cas.

Premier résultat:

 <span myd1="">directive template1</span>
 

Deuxième résultat:

 <div myd2=""><span>directive template2</span></div>
 

Answer 3

Remplacer [True | Faux (par défaut)]

Effet

 1.  Replace the directive element. 
 

Dépendance:

 1. When replace: true, the template or templateUrl must be required. 
 

Answer 4

De plus, j'ai eu cette erreur si j'avais le commentaire au plus haut niveau de template parmi l'élément racine.

 <!-- Just a commented out stuff -->
<div>test of {{value}}</div>