javascript - AngularJS : Expose ng-repeat scope to ng-transclude

Question

我有一个具有以下结构的模板(address-contact-info.html):

<dd ng-repeat="contact in contactInfo | limitTo: displayedItems | orderBy:'desc'">
    <span ng-transclude></span>
</dd>

还有一个指令:

{
    templateUrl: 'address-contact-info.html',
    restrict: 'A',
    scope: {
        contactInfo: '='
    },
    transclude: true,
    link: function (scope, elem, attrs, ctrl, transclude) {
        scope.displayedItems = 1;
    }
};

我想使用这样的指令:

<div address-contact-info contact-info="tel">
    <span>{{contact.number}}</span>
</div>

这意味着我想访问嵌入元素内的 ng-repeat 范围，但我不知道该怎么做。

您知道如何实现这一目标，或者有更好的方法吗？

感谢您的帮助!

更新 这是一个笨蛋:http://plnkr.co/edit/4DYEUhHAPuJOLyG9omCT

更新

我找到了一种适合我的解决方案，但仍然有一个问题。 我想要在模板中嵌入的元素有自己的指令，需要父指令。

现在，当我在 linkFn 中调用 transcludeFn 时，出现以下错误:

Error: [$compile:ctreq] Controller 'editableGroup', required by directive 'editable', can't be found!

http://plnkr.co/edit/zriVyS7MzheSI8jcYM5d

在此 plunker 中，我没有包含其他指令，但我也收到了与 transcludeFb 相关的错误。

Cannot set property 'nodeValue' of undefined

Answer 1

<div address-contact-info contact-info="tel">
    <span>{{contact.number}}</span>
</div>

此代码段将使用没有联系人引用的 Controller 范围进行编译。 因此 ng-repeat 无法显示任何数据。

即使是嵌入的内容也会在 Controller 的范围内进行编译。不属于该指令的范围。

对此的一个技巧是: http://plnkr.co/edit/clrchL1HLtFQLZ4fctZx?p=preview

这可能不是正确/适当的解决方案。