javascript - 指令不会在 AngularJS 中的选项卡选择/页面滚动时触发

Question

我想做的是在实际图像完全加载之前显示一个占位符图像。我找到了答案 here .我使用的代码与接受的答案完全相同。这个答案在正常情况下非常有效。

但是，我的情况有点不同。在我的页面上，我有两个选项卡。我正在使用 ion-slide-box 进行选项卡选择。当用户切换选项卡时，我会加载不同的内容。在每个选项卡下，有一长串项目。每个项目都有一个图像，我在上面实现了这个占位符图像显示方法。用户可以向下滚动以查看更多项目。因此，当用户向下滚动时，我会加载更多项目。

这是我的代码的一瞥，它被简化了:

HTML:

<div class="tab-bar">
<div class="tab-option" ng-class="(slide == 0 ? 'active' : '') ng-click="setSlide(0)">
    Tab 1
</div>
<div class="tab-option" ng-class="(slide == 1 ? 'active' : '') ng-click="setSlide(1)">
    Tab 2
</div>

<ion-view>
<ion-content>
    <div class="list">
        <ion-slide-box on-slide-changed="slideHasChanged($index)" active-slide="slide">
            <ion-slide>
                <ion-list ng-repeat="item in items">
                    My content and Image Here
                    <img hires="{{item.realImageUrl}}" src="placeholderImage.jpg"/>
                </ion-list>
            </ion-slide>
            <ion-slide>
                <ion-list ng-repeat="item in items">
                    My content and Image Here
                    <img hires="{{item.realImageUrl}}" src="placeholderImage.jpg"/>
                </ion-list>
            </ion-slide>
        </ion-slide-box>
    </div>
</ion-content>

在我的 Controller 中(这被简化了很多，我不想打扰不相关的代码):

slideHasChanged = function (index) {
    getMoreItems(); //get more data from server here.
};

这是指令:

app.directive('hires', function() {
    return {
        restrict: 'A',
        scope: { hires: '@' },
        link: function(scope, element, attrs) {
            console.log('link fired');
            element.one('load', function() {
                console.log('load fired');
                element.attr('src', scope.hires);
            });
        }
     };
});

问题是，占位符图像在我第一次访问此页面并加载第一批项目时效果很好。但是每当我需要向下滚动或切换标签时，占位符图像就不再起作用了。行为是，它始终显示占位符图像，完全下载/加载后不显示真实图像。

我想知道是不是因为这个方法只在你加载页面时有效？并且不起作用，因为切换选项卡或向下滚动不会触发页面加载？如果我希望它适用于我的情况，需要对此方法进行哪些更改？

我在我的指令中放置了两条调试消息，我注销了“link fired”和“load fired”。事实证明链接函数被正确触发，只是 element.one('load', function()) 没有被触发。是不是范围不匹配？有什么想法吗？

我一直在尝试代码。实际上，当我切换选项卡或向下滚动时，它有时会起作用。但是大部分时间是行不通的。这很令人困惑，我不知道为什么它有时会起作用。

Answer 1

我认为您走在正确的轨道上，并且可能必须尝试配合项目实际变得可见的时间。这里有一个名为 InView 的指令:https://github.com/thenikso/angular-inview .我有一个有点类似的问题，我为此添加了书签，但它在我的待办事项列表中很远。