Question

我正在开发一个应用程序，该应用程序显示来自reddit的内容并使用他们的api获取img urls。不是每个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加载更多图像。这些新图像不会被指令过滤掉 - 更糟糕的是 - 第一组中的非图像会回来。

我包括了范围。$ watch声明，希望能解决这个问题，但它似乎没有帮助。

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

Answer 1

我尝试了一种不同的方法，只是将图像添加到数组中（如果它们是有效图像而不是之后删除它们）。其中一个问题是，很多网址都是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));

指令在范围更改时无法触发

1 个答案: