¿Cómo usar "reemplazar" de la definición de directiva?


81

En este documento: http://docs.angularjs.org/guide/directive , dice que hay una replaceconfiguración para las directivas:

plantilla : reemplaza el elemento actual con el contenido del HTML. El proceso de reemplazo migra todos los atributos / clases del elemento antiguo al nuevo. Consulte la sección Creación de componentes a continuación para obtener más información.

código 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
  }
});

código HTML

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

Pero la página final se ve así:

directive template1
directive template2

Parece replaceque no funciona. ¿Me pierdo algo?

Demostración en vivo: http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

Respuestas:


174

Te estás confundiendo con transclude: true, lo que agregaría el contenido interno.

replace: truesignifica que el contenido de la plantilla de directiva reemplazará el elemento sobre el que se declara la directiva, en este caso la <div myd1>etiqueta.

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

Por ejemplo sin replace:true

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

y con replace:true

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

Como puede ver en el último ejemplo, la etiqueta div se reemplaza de hecho .


¿Qué pasa con transclude: 'elemento'. Parece hacer lo mismo que replace: 'true' cuando se usa ng-transclude.
CMCDragonkai

¿Reemplazar: falso es lo mismo que no usar reemplazar en absoluto?
Neil

1
@Neil Sí. false
Dejarlo

10
replaceahora está obsoleto
Robert

2
@Robert ¿'reemplazar' tendría un reemplazo o se fue para siempre?
cirovladimir

12

Como dice la documentación, 'reemplazar' determina si el elemento actual es reemplazado por la directiva. La otra opción es si se agrega básicamente como niño. Si observa la fuente de su plnkr, observe que para la segunda directiva donde replace es falsa, la etiqueta div todavía está allí. Para la primera directiva no lo es.

Primer resultado:

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

Segundo resultado:

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

5

Reemplazar [Verdadero | Falso (predeterminado)]

Efecto

1.  Replace the directive element. 

Dependencia:

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

0

También recibí este error si tenía el comentario en el nivel superior de la plantilla con el elemento raíz real.

<!-- Just a commented out stuff -->
<div>test of {{value}}</div>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.