Angular wrap elements translated separately?
I am new to Angular. And while I've made a lot of progress, there are still a couple of things I don't know.
I am currently facing a "closure" problem.
Basically, we want every single element / directive to be translated using html, which is controlled by the parent directive.
Example:
<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>
Desired result (I left out the elements of the directive to make the example clearer):
<my:directive>
<ul>
<li>
<div class="panel">
<div class="header">
// Some stuff that 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 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 controlled by my:directive comes here
</div>
<div class="content">
<my:sub-directive>Child 3</my:sub-directive>
</div>
</div>
</li>
</ul>
</my:directive>
Does anyone know how to handle this? I know that in my example I could enter a panel directive, but note that this is just an example of the same problem.
+3
source to share
1 answer
You can pass the fifth parameter to your directive link function transclude
and then do your manipulations there, here's a quick example:
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);
});
});
}
};
})
+1
source to share