Angular wrap 分别嵌入元素？答案

【问题标题】：Angular wrap transcluded elements separately?Angular wrap 分别嵌入元素？
【发布时间】：2014-12-11 13:42:06
【问题描述】：

我对 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>

有没有人知道如何处理这个问题？我知道在我的示例中我可以引入一个面板指令，但请注意这只是同一问题的一个示例。

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-repeat transclusion angularjs-ng-transclude

【解决方案1】：

您可以将第五个参数传递给指令的链接函数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);                    
                });
            });
        }
    };

})

【讨论】：

谢谢，这让我更接近了一点。但是我收到一条错误消息，提示找不到指令所需的控制器。在我的情况下，mySubDirective 需要：'^myDirective'。你也有解决方案吗？
我不知道是否有不同的解决方案，但我认为它确实需要 elm.append(value)。首先考虑将克隆放在一个数组中。傻我;-)现在我必须找到一种方法在正确的地方优雅地注入它们。
您能用简化版的指令代码更新您的问题吗？也许我可以让我的答案更具体。