Wie Unterelemente mit benutzerdefinierten Winkelanweisung enthalten?

Question

Aktuelle HTML

<g class='entity'> 
    <rect /> 
    <circle /> 
    ... 
</g> 

Neu/Desired HTML

<box> 
    <rect /> 
    <circle /> 
    ... 
</box> 

Einfache Richtlinie

app.directive('box', ['$document', function ($document) { 
    return { 
     restrict : 'E', 
     replace: true, 
     template: "<g class='entity'></g>" 
    }; 
}]); 

Ergebnis in DOM

<g class='entity'>... everything missing here ... </g> 

ich die Unter ch möchte ild Elemente an Ort und Stelle gehalten werden.

Answer 1

Was Sie suchen, heißt Transclusion. Wenn Sie transclude: true zu Ihrer Richtliniendefinition hinzufügen, werden alle untergeordneten Elemente beibehalten. Template überschreibt nur Box Element, aber behalte den inneren Inhalt.

app.directive('box', ['$document', function ($document) { 
return { 
    restrict : 'E', 
    replace: true, 
    transclude: true, 
    template: "<g class='entity'></g>" 
}; 

}]);