1

我有一个自定义嵌入函数，用于将特定的 html 片段移动到指令模板中的特定位置。当前的嵌入功能虽然很棒，但仅限于我只能将东西放到一个位置。我有不同的作品需要去不同的领域。这是我的设置：

<div ng-app="app">
    <div ng-controller="ParentCtrl">
        <div class="parentDirectiveRepeat" data-list="myList">
            <div data-transclude-ipsum>Ipsum</div>
        </div> 
        <hr>
        <div class="parentDirectiveNoRepeat" data-list="myList">
            <div data-transclude-ipsum>Ipsum</div>
        </div>
    </div>
</div>

这是我的两个指令模板：

parentDirectiveRepeat: <div>Parent Directive<div data-ng-repeat="item in list">repeater<div data-transclude-ipsum-destination></div></div></div>
parentDirectiveNoRepeat: <div>Parent Directive<div data-transclude-ipsum-destination></div></div>

以及它们之间的共同共享控制器：

function directiveController($scope, $element, $transclude, $compile){
    var ipsumDestination = angular.element($element[0].querySelectorAll("div[data-transclude-ipsum-destination]"));

    $transclude(function(clone){
        var ipsum = csFncFindElement(clone, "data-transclude-ipsum");
        ipsumDestination.append(ipsum);
    });   
}

所以，这里是输出：

Parent Directive
repeater
repeater
repeater
-------------
Parent Directive
Ipsum

问题是，输出真的应该是

Parent Directive
repeater
ipsum
repeater
ipsum
repeater
ipsum
-------------
Parent Directive
Ipsum

下面是整个过程的jsFiddle ：http: //jsfiddle.net/uBsbC/1/

通过各种测试，我确定当我使用 $transclude 函数时，data-ng-repeat 已经连接并完成了。有没有办法让我告诉它不要让它的孩子连线并等到这个父指令通过之后？

4

0 回答 0