Pregunta ¿Cómo usar `replace` of directive definition?


En este documento: http://docs.angularjs.org/guide/directive , dice que hay un replace configuración para directivas:

modelo - Reemplace el elemento actual con el contenido del HTML. El proceso de reemplazo migra todos los atributos / clases del antiguo elemento 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 última página se ve así:

directive template1
directive template2

Parece que replace no funciona ¿Extraño algo?

Demo en vivo: http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview


75
2018-03-08 02:23


origen


Respuestas:


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

replace: true significa que el contenido de la plantilla directiva sustituirá al elemento sobre el que se declara la directiva, en este caso el <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 es de hecho reemplazado.


162
2018-03-08 03:49



Como dice la documentación, 'reemplazar' determina si el elemento actual es reemplazado por la directiva. La otra opción es si simplemente se agregó como un niño básicamente. Si mira la fuente de su plnkr, observe que para la segunda directiva donde replace es falso, la etiqueta de div aún 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>

8
2018-03-08 03:51



Reemplazar [True | Falso (predeterminado)]

Efecto

1.  Replace the directive element. 

Dependencia:

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

5
2018-06-06 06:42



También obtuve este error si tuviera el comentario en el nivel superior de la plantilla entre el elemento raíz real.

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

0
2018-05-25 16:13