Застрял между ngRepeat, ngSrc, ngHref и объектами JSON в AngularJS

Я пытаюсь установить простой ng-repeat, но он не работает. Я включил angularJS, затем два угловых модуля (ngTouch и ngAnimate, потому что они мне нужны для других целей), и я включил свои файлы с угловыми скриптами. Я установил ng-repeat на простой элемент, который содержит src изображения и href ссылки, которая должна быть взята из объекта JSON из файлов сценариев angular. Но ng-repeat преобразуется в комментарий HTML.Застрял между ngRepeat, ngSrc, ngHref и объектами JSON в AngularJS

index.html:

<div class="container-mini" data-ng-controller="graphicsController as portfolioGraphics"> 
    <div class="content coming-soon lang"></div> 
    Flyers, posters, personal art, etc <br /> 
    <a data-ng-repeat="graphic in graphics" class="fancybox-thumb" rel="fancybox-thumb" data-ng-href="img/graphics/{{graphic.href}}" title="my title"> 
     <img data-ng-src="img/graphics/thumbs/{{graphic.src}}" alt="my alt" /> 
    </a> 
    <a class="fancybox-thumb" rel="fancybox-thumb" data-ng-href="img/graphics/{{graphic.href}}" title="my title"> 
     <img data-ng-src="img/graphics/thumbs/{{graphic.src}}" alt="my alt" /> 
    </a> 
</div>

script.js:

app.controller('GraphicsController', function() { 
    this.items = graphics; 
}); 

var graphics = [ 
    { 
     href: "brand-delices-carte.jpg", 
     src: "brand-delices-carte.jpg", 
    }, 
    { 
     href: "brand-delices-flyer.jpg", 
     src: "brand-delices-flyer.jpg", 
    }, 
    { 
     href: "brand-delices-carte.jpg", 
     src: "brand-delices-carte.jpg", 
    } 
];

Спасибо =)

Edit: ссылка после моего ngRepeat ссылка только для целей тестирования (если он будет работа внутри нормальной связи без ngRepeat)

источник

2014-07-22 LightBen

см. здесь: http://plnkr.co/edit/5EJobuBS9DBvVSoPffQy?p=preview

HTML:

<div class="container-mini" data-ng-controller="GraphicsController"> 
    <div class="content coming-soon lang"></div> 
    Flyers, posters, personal art, etc <br /> 
    <a data-ng-repeat="graphic in graphics" class="fancybox-thumb" rel="fancybox-thumb" data-ng-href="img/graphics/{{graphic.href}}" title="my title"> 
     <img data-ng-src="img/graphics/thumbs/{{graphic.src}}" alt="my alt" /> 
    </a> 
    <a class="fancybox-thumb" rel="fancybox-thumb" data-ng-href="img/graphics/{{graphic.href}}" title="my title"> 
     <img data-ng-src="img/graphics/thumbs/{{graphic.src}}" alt="my alt" /> 
    </a> 
</div>

JS:

app.controller('GraphicsController', function($scope) { 


$scope.graphics = [ 
    { 
     href: "brand-delices-carte.jpg", 
     src: "brand-delices-carte.jpg", 
    }, 
    { 
     href: "brand-delices-flyer.jpg", 
     src: "brand-delices-flyer.jpg", 
    }, 
    { 
     href: "brand-delices-carte.jpg", 
     src: "brand-delices-carte.jpg", 
    } 
]; 

});

или

var graphics = [{ 
    href: "brand-delices-carte.jpg", 
    src: "brand-delices-carte.jpg", 
}, { 
    href: "brand-delices-flyer.jpg", 
    src: "brand-delices-flyer.jpg", 
}, { 
    href: "brand-delices-carte.jpg", 
    src: "brand-delices-carte.jpg", 
}]; 


app.controller('GraphicsController', function($scope) { 


    $scope.graphics = graphics ; 
    });

источник

2014-07-22 10:21:44 sylwester

Привет и благодарю вас за помощь. Он по-прежнему не работает. NgRepeat преобразуется в комментарий HTML, а тестовая ссылка не интерпретирует то, что находится между скобками. Значит, это отображается в консоли Chrome: my alt – LightBen

Для этого исправления вам также потребуется изменить data-ng-controller = "graphicsController как портфолиоGraphics" только на data-ng-controller = "graphicsController" или использовать портфолиоGraphics для доступа к переменным области видимости как указано ниже – glendaviesnz

@lendaviesnz хорошо видно Я обновил ответ – sylwester

Сильвестер дает одно исправление, но если вы хотите сохранить 'контроллер как' синтаксисом, вы использовали все свои переменные области видимости, доступные через 'portfolioGraphics', поэтому попробуйте

<a data-ng-repeat="graphic in portfolioGraphics.items" class="fancybox-thumb" rel="fancybox-thumb" data-ng-href="img/graphics/{{graphic.href}}" title="my title"> 
    <img data-ng-src="img/graphics/thumbs/{{graphic.src}}" alt="my alt" /> 
</a>

источник

2014-07-22 10:29:04 glendaviesnz

Застрял между ngRepeat, ngSrc, ngHref и объектами JSON в AngularJS

ответ

Смежные вопросы