Javascript 指令不'；在AngularJS中启动选项卡选择/页面滚动

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

然而，我的情况有点不同。在我的页面上，我有两个选项卡。我正在使用

离子滑框

进行选项卡选择。当用户切换选项卡时，我会加载不同的内容。在每个选项卡下，都有一个长长的项目列表。每个项目都有一个图像，我在上面实现了这个占位符图像显示方法。用户可以向下滚动查看更多项目。所以当用户向下滚动时，我将加载更多的项目

下面是我的代码的一小段，它被简化了：

HTML:

这是指令：

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

app.directive('hires', function() {
return function(scope, element, attrs) {
        attrs.$observe('hires', function(value) {
        element.attr({
            'src': value
        });
    });      
  };
});

问题是，占位符图像在我第一次来到这个页面并加载第一批项目时效果良好。但每当我需要向下滚动或切换选项卡时，占位符图像就不再工作了。其行为是，它总是显示占位符图像，真正的图像在完全下载/加载后不会显示

我想知道这是不是因为这种方法只在加载页面时有效？因为切换标签或向下滚动不会触发页面加载，所以不起作用？如果我想让这种方法适合我的情况，那么这种方法需要做什么改变

我在指令中放了两条调试消息，我注销“链接触发”和“加载触发”。结果表明链接函数被正确触发，它只是

元素。没有触发one（'load'，function（））

。是因为范围不匹配吗？有什么想法吗

---

我已经尝试了很多代码。事实上，当我切换tab或向下滚动时，它有时会起作用。但大多数时间都不管用。这让人困惑，我不知道为什么有时候它会起作用。

我认为你的思路是正确的，可能必须尝试在项目实际可见时进行配合。这里有一个名为InView的指令：。我有一个类似的问题，我把它作为书签，但它在我的待办事项列表中排得很靠后

为您的指令尝试以下操作：

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

app.directive('hires', function() {
return function(scope, element, attrs) {
        attrs.$observe('hires', function(value) {
        element.attr({
            'src': value
        });
    });      
  };
});

---

在这里使用$observe的行为与ng src非常相似。

因此我最终找到了正确的方法，只需将指令的

链接更改为以下内容：

link: function (scope, element, attrs) {
    if (scope.hires != element.attr('src')) {
        element.attr('src', scope.hires);
    }
}

去掉
元素。一个
。这就是它只工作一次的原因。
如果您发布相关代码和HTML，您将获得更多帮助。@MikeFeltman我刚刚更新了我的问题，添加了一些代码。我认为item.realmageURL周围的花括号是不必要的。这可能与问题无关，但我会尝试删除它们以进行检查。你也创建了指令吗？@MikeFeltman是的，我创建了指令。这与我问题中链接中的答案完全相同。大括号是一种以角度绑定数据的方法，不能删除。
element.one（'load'）
我想您的真实代码中没有相同的打字错误，但我更愿意确认->
element.on（'load'
我是angular的新手。您提供的github项目有太多不相关的信息，我很难提取有用的信息。如果您能根据参考为我的案例提供解决方案，那就太好了。
link: function (scope, element, attrs) {
    if (scope.hires != element.attr('src')) {
        element.attr('src', scope.hires);
    }
}