web-dev-qa-db-fra.com

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

Dans ce document: http://docs.angularjs.org/guide/directive , il est indiqué qu'il existe une configuration replace pour les directives:

template - remplace l'élément actuel par le contenu du code HTML. Le processus de remplacement migre tous les attributs/classes de l'ancien élément vers le nouvel. Consultez la section Création de composants 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 ressemble à:

directive template1
directive template2

Il semble que la replace ne fonctionne pas. Est-ce que quelque chose me manque?

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

angularjsangularjs-directive
79
Freewind

Vous êtes en train de confondre avec transclude: true, qui ajouterait le contenu interne.

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

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

Par exemple sansreplace:true

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

et avecreplace:true

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

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

166
checketts

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>
9
Ryan O'Neill

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.
5
user3454062

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>
0
Konstantin Isaev