Question

我有一个非常简单的角度js指令，它使用ng-repeat循环遍历集合，并简单地生成包含图像的有序列表。该指令有效，但我注意到浏览器中有一个额外的控制台错误（chrome）。

<div ng-app="MyApp">
  <custom-directive image-count="4"></custom-directive>
</div>

angular.module('MyApp', []).directive('customDirective', function() {
    'use strict';
    return {
        restrict: 'E',
        template:   '<ul>'+
                        '<li ng-repeat="i in collection">'+
                            '<img src="http://placehold.it/{{i}}00x100.jpg" />'+
                        '</li>'+
                    '</ul>',
        scope: {
            imageCount: '@'
        },
        link: function ($scope, element, attr) {
            $scope.collection = [];

            for(var i = 1; i < $scope.imageCount; i++){
                console.log(i);
                $scope.collection.push(i);
            }
        }
    };
});

codepen http://codepen.io/OmarCreativeDev/pen/OXjQJw?editors=1010

控制台错误获取http://placehold.it/%7B%7Bi%7D%7D00x100.jpg 404（未找到）

已解码的控制台错误 http://placehold.it/ {{i}} 00x100.jpg

Answer 1

如果您尝试使用＆＃34; ng-src＆＃34;该怎么办？而不是模板上的src？

angular.module('MyApp', []).directive('customDirective', function() {
    'use strict';
    return {
        restrict: 'E',
        template:   '<ul>'+
                        '<li ng-repeat="i in collection">'+
                            '<img ng-src="http://placehold.it/{{i}}00x100.jpg" />'+
                        '</li>'+
                    '</ul>',
        scope: {
            imageCount: '@'
        },
        link: function ($scope, element, attr) {
            $scope.collection = [];

            for(var i = 1; i < $scope.imageCount; i++){
                console.log(i);
                $scope.collection.push(i);
            }
        }
    };
});

Answer 2

尝试用ng-src代替src

Use of ng-src vs src ngSrc

＆＃13;

  '<img ng-src="http://placehold.it/{{i}}00x100.jpg" />'+

＆＃13;

angular js指令中的ng-repeat在浏览器控制台中生成404

2 个答案: