在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数组......所有这些都有'name'和'logo'属性.一切正常.

但我仍然有一个困扰我的小问题:

这是我在Google Chrome控制台中收到的错误.

我理解这个错误的原因.但我不知道如何摆脱它......

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';
}