3

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

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

4

1 回答 1

8

您需要使用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';
}
于 2013-04-23T23:24:10.703 回答