在AngularJS中使用ngRepeat的控制檯錯誤

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數組在它幾個對象...所有的他們有'名字'和'徽標'屬性。它一切正常。

但我依然有一個困擾我一個小問題：

這是我在谷歌瀏覽器的控制檯得到一個錯誤。

我明白這個錯誤的原因。但我不知道如何擺脫它...

Answer 1

您需要使用ngSrc來阻止瀏覽器請求一個名爲「{{logo}}」的文件，該文件在您的作用域被綁定之前呈現以你的看法。

破碎：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'; 
}