ng-repeat в угловой директиве js выдает 404 в консоли браузера

Question

ng-repeat в угловой директиве js выдает 404 в консоли браузера

0

У меня есть очень простая угловая директива js, которая пересекает коллекцию с помощью ng-repeat и просто генерирует упорядоченный список, содержащий изображения. Директива работает, но я заметил дополнительную консольную ошибку в браузере (хром).

<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

консольная ошибка GET http://placehold.it/%7B%7Bi%7D%7D00x100.jpg 404 (не найдено)

ошибка декодированной консоли http://placehold.it/ {{i}} 00x100.jpg

omarCreativeDev 07 июль 2016, в 18:23

Источник

Теги:

angularjs

angular-directive

angularjs-directive

2 ответа

0

попробуйте ng-src вместо src

Использование ng-src vs src ngSrc

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

Prianca 07 июль 2016, в 14:30

Ещё вопросы

Sami Triki · Accepted Answer · 2016-07-07T13-36-00.000Z

Что делать, если вы попытались использовать "ng-src" вместо 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);
            }
        }
    };
});

блестящий! NG-SRC, в отличие от SRC сделал свое дело! не могу поверить, что я пропустил это. Спасибо