Question

有没有办法告诉ng-repeat里面的指令是一个孤立的范围，而不是每个孩子？

<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>'
    }
});

为每个孩子制作（注意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指令的链接功能中分配给范围的属性。

修改

最后，我发现问题在于zoom-image-container和zoom-control之前调用的链接功能比zoom的链接功能更好，所以我已经解决了与广播。

无论如何，我真的很想知道他们之前为什么被调用而不是父指令链接功能（可能这是因为require: '^zoom'？）。

Answer 1

这些链接应该有助于理解链接功能的执行顺序：

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，最后称为postlink。到那时操作dom应该是安全的，所以在父母的postlink执行时，子指令的postlink已经被执行了！

每个孩子的角度ng-重复ng-隔离范围

1 个答案: