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

スコープがビューにバインドされる前にレンダリングされる「{{logo}}」というファイルをブラウザーが要求しないようにするには、 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';
}
于 2013-04-23T23:24:10.703 に答える