Strano comportamento delle direttive angolari annidate
-
20-12-2019 - |
Domanda
Voglio usare le mie direttive all'interno di altre direttive.L'esempio seguente dà così strani risultati che ho dovuto rinunciare e fare questa domanda.Vorrei che qualcuno mi spieghi cosa sta succedendo qui:
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>
.
Il DOM risultante è:
<div ng-transclude=""></div>
<outer></outer>
<two></two>
<outer>something</outer>
.
jsfiddle: http://jsfiddle.net/wppul/
.è un bug?
Modifica:
Uscita prevista DOM:
<div ng-transclude>whatever</div>
<div ng-transclude>one</div>
<div ng-transclude>two</div>
<div ng-transclude>something</div>
. Soluzione
Invece di usare replace
lo faremo manualmente, questo sembra mantenere felice angolare e ti faccio ciò di cui hai bisogno.
1) Set replace: false
invece di VERO in uno e due.(rendendo angoso felice)
2) Sostituire manualmente l'HTML utilizzando questa funzione di collegamento su una e due:
link: function(scope, element, attrs) {
element.replaceWith(element.html());
}
.
Questo comporterà:
<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>
.
I nodi di testo sono stati circondati da tag B per sbarazzarsi di Generato automatico.
Ecco il violino aggiornato: http://jsfiddle.net/wppul/7/
.Altri suggerimenti
Avvolgere il modello con un elemento radice risolverà il problema
template: '<div><outer>one</outer></div>'
template: '<div><outer>two</outer></div>'
.