Uhlové ovíjanie preložilo prvky samostatne? - angularjs, angularjs-directive, angularjs-ng-repeat, translokácia, angularjs-ng-transclude

S Angulom som celkom nový. A napriek tomu, že som dosiahol veľký pokrok, stále je pár vecí, ktoré neviem.

V súčasnej dobe som narazil na "problém" translokácie.

V podstate to, čo chceme, je zabaliť každý prekladaný prvok / smernicu samostatne s html, ktorý je riadený materskou smernicou.

Príklad:

<my:directive>
<my:sub-directive>Child 1</my:sub-directive>
<my:sub-directive>Child 2</my:sub-directive>
<my:sub-directive>Child 3</my:sub-directive>
</my:directive>

Požadovaný výsledok (som opustil prvky smernice, aby bol príklad trochu jasnejší):

<my:directive>
<ul>
<li>
<div class="panel">
<div class="header">
// Some stuff that"s controlled by my:directive comes here
</div>
<div class="content">
<my:sub-directive>Child 1</my:sub-directive>
</div>
</div>
</li>
<li>
<div class="panel">
<div class="header">
// Some stuff that"s controlled by my:directive comes here
</div>
<div class="content">
<my:sub-directive>Child 2</my:sub-directive>
</div>
</div>
</li>
<li>
<div class="panel">
<div class="header">
// Some stuff that"s controlled by my:directive comes here
</div>
<div class="content">
<my:sub-directive>Child 3</my:sub-directive>
</div>
</div>
</li>
</ul>
</my:directive>

Má niekto vedieť, ako to zvládnuť? Viem, že v mojom príklade môžem predstaviť panelovú smernicu, ale všimnite si, že ide len o príklad toho istého problému.

odpovede:

Môžete preniesť piaty parameter na funkciu prepojenia smernice transclude a potom urobte svoju manipuláciu tam, tu je rýchly príklad:

angular.directive("myDirective", function ($compile) {
return {
restrict:"EA",
transclude:true,
link: function (scope, elm, attrs,ctrl,transclude) {
transclude(scope,function(clone) {
//clone is an array of whatever is inside your main directive
clone.filter("mySubDirective").each(function(index, value){
//create your html and you might have to $compile it before:
elm.append(myHtml);
});
});
}
};

})