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.


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -