omarCreativeDev omarCreativeDev - 4 months ago 10
AngularJS Question

ng-repeat in angular js directive produces 404 in browser console

i have a very simple angular js directive that loops over a collection using ng-repeat and simply generates an ordered list containing images. The directive works but I have noticed an extra console error in the browser (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

console error GET http://placehold.it/%7B%7Bi%7D%7D00x100.jpg 404 (Not Found)

decoded console error http://placehold.it/{{i}}00x100.jpg

Answer

What if you tried using "ng-src" instead of src on the template ?

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);
            }
        }
    };
});
Comments