在 AngularJS 中使用 ngRepeat 控制台出错答案

【问题标题】：Error in console using ngRepeat in AngularJS在 AngularJS 中使用 ngRepeat 控制台出错
【发布时间】：2013-04-17 08:07:14
【问题描述】：

我是 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 控制台中遇到的错误。

我了解此错误的原因。但我不知道如何摆脱它......

【问题讨论】：

标签： php angularjs asynchronous angularjs-ng-repeat src

【解决方案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';
}

【讨论】：