Angular ng-repeat ng-isolate-scope 每个 child

Question

有没有办法告诉ng-repeat里面的一个指令是一个独立的作用域，而不是每个child？

<div class="item" ng-class="{active: $index === 0}" ng-repeat="image in images">
    <image-zoom img-src="{{image.catalog}}"></image-zoom>
</div>

并且：

app.directive('imageZoom', function () {
    return {
        restrict: 'E',
        scope: {
            imageSrc: "@"
        },
        template: '<zoom class="container-fluid" zoom-imagesrc="{{imageSrc}}">' +
            '<zoom-image-container class="zoom-image-container"></zoom-image-container>' +
            '<aside>' +
            '<zoom-control class="zoom-control"></zoom-control>' +
            '</aside>' +
            '</zoom>'
    }
});

产生（每个child注意ng-isolate-scope）：

<!-- ngRepeat: image in images -->
<div class="item ng-scope active" ng-class="{active: $index === 0}" ng-repeat="image in images">
    <image-zoom img-src="img/items/red-5.jpg" class="ng-isolate-scope">
        <zoom class="container-fluid ng-isolate-scope" zoom-imagesrc="">
            <zoom-image-container class="zoom-image-container ng-isolate-scope">
                <div class="zoom-image-container__clip">
                    <img ng-src="">
                </div>
            </zoom-image-container>
            <aside>
                <zoom-control class="zoom-control ng-isolate-scope">
                    <div class="zoom-control__clip">
                        <img ng-src="">
                        <div class="mark"></div>
                    </div>
                </zoom-control>
            </aside>
        </zoom>
    </image-zoom>
</div>
<!-- end ngRepeat: image in images -->

有办法得到这个吗？:

<!-- ngRepeat: image in images -->
<div class="item ng-scope active" ng-class="{active: $index === 0}" ng-repeat="image in images">
    <image-zoom img-src="img/items/red-5.jpg" class="ng-isolate-scope">
        <zoom class="container-fluid" zoom-imagesrc="">
            <zoom-image-container class="zoom-image-container">
                <div class="zoom-image-container__clip">
                    <img ng-src="">
                </div>
            </zoom-image-container>
            <aside>
                <zoom-control class="zoom-control">
                    <div class="zoom-control__clip">
                        <img ng-src="">
                        <div class="mark"></div>
                    </div>
                </zoom-control>
            </aside>
        </zoom>
    </image-zoom>
</div>
<!-- end ngRepeat: image in images -->

最终的问题是zoom-image-container和zoom-control需要通过控制器与zoom（指令+控制器）通信。当他们访问控制器时，已在 zoom 指令的 link 函数中分配给范围的属性已被删除。

编辑

最后我发现问题是 zoom-image-container 和 zoom-control 的 link 函数比 [=22= 的 link 函数更早被调用] 所以我用广播解决了。

无论如何，我真的很想知道为什么在 parent 指令 link 函数之前调用它们（也许这是因为 require: '^zoom'？）。

Answer 1

那些 link 应该有助于理解 link 函数的执行顺序：

Calling order of link function in nested and repeated angularjs directives

http://www.undefinednull.com/2014/07/07/practical-guide-to-prelink-postlink-and-controller-methods-of-angular-directives/

基本上，link默认是一个postlink，最后调用。到那时操作 dom 应该是安全的，因此子指令的 postlink 已经在执行父指令的 postlink 时执行!

Angular ng-repeat ng-isolate-scope 每个 child

Angular ng-repeat ng-isolate-scope in each child

angularjs

ng-repeat

angularjs-scope

angularjs-ng-repeat