指令 作用域更改时无法触发

Directive Fails to fire when scope changes

本文关键字：作用域 指令      更新时间：2023-09-26

我正在开发一个应用程序，该应用程序显示来自reddit的内容，并使用他们的API获取img URL。然而，并非每个 reddit 帖子都包含图像;因此，我编写了一个指令来删除任何在尝试绑定时遇到错误的图像(及其父容器((因为它们是非图像或因为它们是 404(。

该指令如下所示：

app.directive('img', function() {
    return {
        restrict: 'E',
            link: function(scope, element, attrs) {
                element.error(function() { 
                element.parent().remove(); 
            });         
            scope.$watch(function() { return element['img']; },
                function() { 
                    element.error( 
                        function(){ element.parent().remove(); } 
                    ); 
                }
            );          
        }
    }
});

当我第一次加载页面时，一切正常。所有图像都已正确过滤，其余图像将到位。但是，当我到达页面底部时，ng-infinite-scroll调用了一个函数来从reddit加载更多图像。这些新图像不会被指令过滤，更糟糕的是，第一组的非图像会返回。

我包含了scope.$watch声明，希望解决这个问题，但它似乎没有帮助。

与该指令争论的任何想法？谢谢！

我尝试了一种不同的方法，仅将图像添加到数组中，如果它们是有效的图像，而不是在之后删除它们。其中一个问题是，很多网址都是html页面，而不是原始图像。有些图像也非常大，因此会导致性能问题 (DEMO(。

$http.jsonp(url).success(function(data) {
    var items = data.data.children;
    var allPromises = [];
    for (var i = 0; i < items.length; i++) {
        if(!items[i].data.url.match(/.+'.(jpg|jpeg||png|gif)$/i)) continue;
        var deferred = $q.defer(); 
        (function(self, index, d) {
            var img = new Image();
            img.src = items[index].data.url;
            img.onload = function() {
                d.resolve(items[index].data);
            }
            img.onerror = function() {
                d.resolve();
            }
        })(this, i, deferred);
        allPromises.push(deferred.promise);
    }
    $q.all(allPromises).then(function(items) {
        this.items = this.items.concat(items.filter(function(item) {
            return item != undefined;
        }));
        this.after = "t3_" + this.items[this.items.length - 1].id;
        this.busy = false;
    }.bind(this));
}.bind(this));
相关文章：