Comportamento estranho de aninhados Angular directivas
-
20-12-2019 - |
Pergunta
Eu quero usar o meu directivas no âmbito de outras directivas.O exemplo a seguir dá de modo estranho resultados que eu tive que desistir e fazer esta pergunta.Eu gostaria de alguém para me explicar o que está acontecendo aqui:
var app = angular.module('blah', []);
app.directive('one', function() {
return {
restrict: 'E',
replace: true,
template: '<outer>one</outer>'
};
});
app.directive('two', function() {
return {
restrict: 'E',
replace: true,
template: '<outer>two</outer>'
};
});
app.directive('outer', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div ng-transclude></div>'
};
});
HTML:
<outer>whatever</outer>
<one></one>
<two></two>
<outer>something</outer>
A resultante DOM é:
<div ng-transclude=""></div>
<outer></outer>
<two></two>
<outer>something</outer>
JSFiddle: http://jsfiddle.net/WPpUL/
É um bug?
EDITAR:
Resultado esperado DOM:
<div ng-transclude>whatever</div>
<div ng-transclude>one</div>
<div ng-transclude>two</div>
<div ng-transclude>something</div>
Solução
Em vez de usar replace
nós vamos fazê-lo manualmente - o que parece manter angular feliz e você recebe o que você precisa.
1) Conjunto replace: false
em vez de verdadeiro em Um e Dois.(fazendo angular feliz)
2) Substitua manualmente o html usando esta função link para Um e Dois:
link: function(scope, element, attrs) {
element.replaceWith(element.html());
}
Isto irá resultar em:
<div ng-transclude=""><b class="ng-scope">whatever</b></div>
<div ng-transclude=""><b class="ng-scope">one</b></div>
<div ng-transclude=""><b class="ng-scope">two</b></div>
<div ng-transclude=""><b class="ng-scope">something</b></div>
Os nós de texto foram cercados por B etiquetas de se livrar de gerado automaticamente, se Estende.
Aqui está atualizado violino: http://jsfiddle.net/WPpUL/7/
Outras dicas
Enrole modelo com um elemento raiz irá corrigir o problema
template: '<div><outer>one</outer></div>'
template: '<div><outer>two</outer></div>'