我对 Angular 还很陌生。尽管我已经取得了很大进步,但仍有一些事情我不知道。
目前我遇到了嵌入“问题”。
基本上我们想要的是用父指令控制的 html 单独包装每个嵌入的元素/指令。
示例:
<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>
期望的结果(我保留了指令元素以使示例更加清晰):
<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>
有人知道如何处理这个问题吗?我知道在我的示例中我可以引入面板指令,但请注意,这只是同一问题的示例。
最佳答案
您可以将第五个参数传递给指令的链接函数transclude
,然后在其中进行操作,这是一个简单的示例:
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);
});
});
}
};
})
关于angularjs - Angular 包裹分别包含元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27424276/