javascript - AngularJS ng-repeat with external image source not updating view with images -
i've run issue building new website i'm pulling request external api contains image "id". image id can accessed going https://externalsite.com/getimage/id_width.png (width variable, 128, 256, 512, etc.)
once request complete, populates ng-src correct links. problem images never show up. can go developer tools , see source correct image doesn't display on page. if not use ng-repeat, images show fine , page behaves expected. if use ng-repeat, images never show in view if @ actual image tag, source set properly.
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:
for reason can't format code, partial return due large nature of these returns.
{"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"
i'm pretty new angular feeling i'm doing factory wrong causing issue bi-directional databinding not updating view. i've searched lot of hours , re-implemented 2-3 times in different ways , can't seem these images show up. can provide appreciated.
try setting image urls before set $scope.kills
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"; }); });
this ensure image path set before scope value set. 1 thing make sure img tag self-closed looks <img ... />
, because scopes generated ng-repeat may leak if not closed properly.