example - directivas personalizadas angularjs
¿Cómo usar la función ''reemplazar'' para las directivas AngularJS personalizadas? (2)
replace:true es obsoleto
De los documentos:
replace([DEPRECATED!], se eliminará en la próxima versión principal, es decir, v2.0)especifica qué debe reemplazar la plantilla. El valor predeterminado es
false.
true- la plantilla reemplazará el elemento de la directiva.false- la plantilla reemplazará el contenido del elemento de la directiva.
- API integral de AngularJS API
De GitHub:
Caitp-- Está obsoleto porque hay problemas conocidos, muy tontos con el
replace: true, algunos de los cuales no se pueden arreglar de manera razonable. Si tiene cuidado y evita estos problemas, entonces tendrá más poder para usted, pero para el beneficio de los nuevos usuarios, es más fácil simplemente decirles "esto le dará dolor de cabeza, no lo haga".
Esta pregunta ya tiene una respuesta aquí:
¿Por qué replace=true o replace=false no tiene ningún impacto en el siguiente código?
¿Por qué no se muestra el "cierto contenido existente" cuando replace = false?
O poniéndolo de forma más humilde, ¿puede explicar amablemente cuál es la función replace=true/false en las directivas y cómo usarla?
Ejemplo
JS / Angular:
<script>
angular.module(''scopes'', [])
.controller(''Ctrl'', function($scope) {
$scope.title = "hello";
})
.directive(''myDir'', function() {
return {
restrict: ''E'',
replace: true,
template: ''<div>{{title}}</div>''
};
});
</script>
HTML:
<div ng-controller="Ctrl">
<my-dir><h3>some existing content</h3></my-dir>
</div>
Véalo en Plunker aquí:
Cuando tienes replace: true obtienes la siguiente pieza de DOM:
<div ng-controller="Ctrl" class="ng-scope">
<div class="ng-binding">hello</div>
</div>
mientras que con replace: false obtienes esto:
<div ng-controller="Ctrl" class="ng-scope">
<my-dir>
<div class="ng-binding">hello</div>
</my-dir>
</div>
Entonces, la propiedad replace en las directivas se refiere a si el elemento al cual se está aplicando la directiva ( <my-dir> en ese caso) debe permanecer ( replace: false ) y la plantilla de la directiva debe anexarse como hija,
O
el elemento al que se aplica la directiva debe ser reemplazado ( replace: true ) por la plantilla de la directiva.
En ambos casos, los elementos del elemento (a los que se aplica la directiva) se perderán. Si quisiera conservar el contenido / hijos originales del elemento, tendría que transludirlo. La siguiente directiva lo haría:
.directive(''myDir'', function() {
return {
restrict: ''E'',
replace: false,
transclude: true,
template: ''<div>{{title}}<div ng-transclude></div></div>''
};
});
En ese caso, si en la plantilla de la directiva tiene un elemento (o elementos) con atributo ng-transclude , su contenido será reemplazado por el contenido original del elemento (al que se está aplicando la directiva).
Vea el ejemplo de translusión http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview
Consulte this para leer más sobre la translusión.