我有一个自定义转换函数,用于将特定的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已经连线完成了。有没有办法让我告诉它不要让它的孩子接线并等到这个父指令通过之后?