AngularJS ng-repeat with external image source 不使用图像更新视图

Question

我运行遇到了构建新网站的问题，我从外部 API 提取包含图像 "ID" 的获取请求。可以通过转到 https://externalsite.com/getimage/id_width.png（宽度可变，128、256、512 等）

来访问此图像 ID

获取请求完成后，它会使用正确的链接填充我的 ng-src。问题是图像从未真正显示出来。我可以进入开发人员工具并查看来源是否正确，但图像未显示在页面上。如果我 NOT 使用 ng-repeat，图像显示得很好并且页面按预期运行。如果我使用 ng-repeat，图像永远不会出现在视图中，但如果您查看实际的图像标签，则源设置正确。

HTML:

<div ng-controller="KillCtrl" class="isotope-container row grid-space-20">
    <div ng-repeat="kill in kills" class="col-sm-6 col-md-3 isotope-item web-design">
        <div class="image-box">
            <div class="overlay-container">
                <img ng-src="{{kill.shipimage}}" alt="Cover Image">

JS:

var app = angular.module('disconnectEVE', [])
.config([
'$compileProvider',
function( $compileProvider )
{
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
}
]);

app.factory('killfactory', function ($http, $q) {
var factory = {};
factory.getlist = function(){
    return $http.get('https://zkillboard.com/api/corporationID/98379655/pastSeconds/86400/',{'Access-Control-Allow-Origin': '*'}).
    success(function(data){
        console.log("great success!");
        return data;
    })
    .error(function(data, status, headers, config){
        console.log(data);
        console.log(status);
        console.log(headers);
        console.log(config);
        return data;
    });
}
return factory;
});

app.controller('KillCtrl', function($scope, $http, killfactory) {

killfactory.getlist().success(function(data){
    $scope.kills = data;
    angular.forEach($scope.kills, function(kill){
            kill.shipimage = "https://image.eveonline.com/Render/" + kill.victim.shipTypeID + "_256.png";
    });
    console.log(JSON.stringify($scope.kills));
});
$scope.message = "Hello!";
$scope.victim = "victim1";
});

RETURN:

出于某种原因，我无法将其格式化为代码，这是部分 return，因为这些 return 的性质很大。

{"killID":"46162609","solarSystemID":"30003079","killTime":"2015-04-23 05:07:00","moonID":"0","victim":{"shipTypeID":"29988","damageTaken":"27942","factionName":"","factionID":"0","allianceName":"That Escalated Quickly.","allianceID":"99003940","corporationName":"The Echelon Phoenix","corporationID":"98342213","characterName":"Ionic Freeze","characterID":"93593140"

我是 Angular 的新手，所以我觉得我做错了工厂，这导致双向数据绑定不更新视图的问题。我已经搜索了很多小时，并以不同的方式重新实现了 2-3 次，但似乎无法显示这些图像。如果您能提供任何帮助，我们将不胜感激。

Answer 1

尝试在设置 $scope.kills

之前设置图片 url

app.controller('KillCtrl', function($scope, $http, killfactory) {

    killfactory.getlist().success(function(data){
       var kills = data;
       angular.forEach(kills, function(kill){
           kill.shipimage = "https://image.eveonline.com/Render/" + kill.victim.shipTypeID + "_256.png";
       });
       $scope.kills = kills;
       console.log(JSON.stringify($scope.kills));

       $scope.message = "Hello!";
       $scope.victim = "victim1";
    });
});

这将确保在设置范围值之前设置图像路径。还有一件事是确保 img 标签是自关闭的，所以它看起来像 <img ... />，这是因为如果没有正确关闭，由 ng-repeat 生成的范围可能会泄漏。

Answer 2

原来罪魁祸首是同位素设置。 .isotope-container 的设置称为 overflow 并设置为值 hidden 导致更新后的图像无法呈现。一旦我禁用该设置，图像就开始按预期工作。我将开始研究 angular-isotope 指令，这样我就可以停止单独使用同位素。谢谢大家的帮助！

AngularJS ng-repeat with external image source 不使用图像更新视图

AngularJS ng-repeat with external image source not updating view with images

javascript

angularjs

ng-repeat