Ошибка в консоли с помощью ngRepeat в AngularJS

Question

Я новый человек для AngularJS, и у меня есть небольшая проблема.

Вот мой код:

JS:

<script> 
var app = angular.module('appList', []); 

app.controller('AppListCtrl', function ($scope, $http) { 
    $scope.url = 'getappinfo.php'; 
    $http.post($scope.url).success(function (data) { 
     $scope.apps = data; 
    }).error(function (data) { 
      console.log(data, status); 
     }); 
}) 

app.directive('application', function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      name: "@", 
      logo: "@" 
     }, 
     template: "<div style='width:100px; height:100px; border:1px solid black'>{{name}}  <img src='{{logo}}' style='width:50px'></div>" 
    } 
}) 
</script> 

HTML:

<div ng-app="appList"> 
    <div ng-controller="AppListCtrl" id='applications_holder'> 
     <div ng-repeat="app in apps"> 
     <application name="{{app.name}}" logo="{{app.logo}}"></application> 
     </div> 
    </div> 
</div> 

От getappinfo.php я получаю массив JSON с несколькими объектами в нем ... Все у них есть свойства «имя» и «логотип». Все работает отлично.

Но все-таки у меня есть небольшая проблема, которая беспокоит меня:

Это ошибка, которую я получаю в консоли Google Chrome.

Я понимаю причину этой ошибки. Но я не знаю, как избавиться от этого ...

Answer 1

Чтобы предотвратить запрос браузера на запрос «{{логотип}}», вам необходимо использовать ngSrc, который будет отображаться до того, как ваша область была привязана на ваш взгляд.

Сломанный: http://jsfiddle.net/wNwrr/

Исправлено: http://jsfiddle.net/wNwrr/1

HTML

<div ng-app ng-controller="x"> 
    <img ng-src="{{src}}" /> 
</div> 

JavaScript

function x($scope) { 
    $scope.src = 'https://www.google.com/images/srpr/logo4w.png'; 
}