CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Emmanuel Henri
Emmanuel Henri

Reputation: 163

Angular issue for image with Ng-repeat

I'm trying to use Angular Ng-repeat to repeat objects from the scope (each object has 4 properties: entry, title, image, link). Everything seems to be there when I check the html in Chrome developer tools except the image doesn't show up on the page. I'm also using fancybox and themepunch. If I don't use Angular to repeat and manually write the html in my code it works fine. I think the problem might be with data-src and angular not liking this but couldn't find anything to prove my theory. Also might it be the class added mega-entry-innerwrap that loads with the page...I dunno I checked a lot of things (tried replacing data-src with ng-src but didn't work).

Here is the html code....

<div class="containerMegafolio">
<div ng-controller="update">
<div ng-repeat="new in news" class="megafolio-container"><img id="entry-{{new.entry}}" data-src="{{new.image}}" data-width="504" data-height="400" class="mega-entry"/>
  <div class="mega-covercaption mega-square-bottom mega-landscape-bottom mega-portrait-bottom mega-pink mega-transparent">
    <div class="mega-title">{{new.title}}</div>
  </div>
  <div class="mega-hover notitle alone">
    <div class="mega-hovertitle">Cliquez ici</div><a href="{{new.link}}">
      <div class="mega-hoverlink"></div></a>
  </div>
</div>
</div>
</div>

And this is the JS script...(I included just one object for shortening this post)

var myApp = angular.module('myApp', ['ui.router']);

myApp.controller('update', ['$scope', function ($scope) {

$scope.news = [
    {
    entry: '1',
    title: 'Title blah blah blah', 
    image: 'images/entry7.jpg', 
    link: "https://www.facebook.com/......"}

];

}]);

The URL below should show http://example.com/images/entry7.jpg and not the gibberish below. 

<div class="mega-entry-innerwrap" style="background: url(http://example.com/%7B%7Bnew.image%7D%7D) 50% 49% / cover no-repeat;"></div>

EDIT: Yes it is the below code that doesn't work well with Angular. So now working on a solution. Trying to pre-load images with a promise before running the NG-Repeat see if this works...in the meantime you can check the project on github if you want to try your hand at it. https://github.com/mannyhenri/testload

function prepairNewEntries(container,opt,newentry) {

    container.find('>.mega-entry-added').each(function(i) {
            var ent=$(this);
            if (!ent.hasClass('tp-layout')) {

                    ent.removeClass('tp-layout-first-item').removeClass('tp-layout-last-item').removeClass('very-last-item');
                    ent.addClass("tp-notordered");
                    if (newentry) ent.addClass("notplayedyet");
                    ent.wrapInner('<div class="mega-entry-innerwrap"></div>');
                    //ent.find('.mega-socialbar').appendTo(ent)
                    var iw = ent.find('.mega-entry-innerwrap')
                    /*if (opt.ie) {
                        iw.append('<img class="ieimg" src='+ent.data("src")+'>');
                    } else {*/
                        iw.css({'background':'url('+ent.data("src")+')','backgroundPosition':'50% 49%', 'backgroundSize':'cover', 'background-repeat':'no-repeat'});
                    //}

EDIT 2: The closest I got to not undefined in the mega-entry-innerwrap URL is by keeping data-src={{new.image}} in the div and not doing anything to the themepunch code. It does this below...

background: url(http://www.example.com:8080/%7B%7Bnew.image%7D%7D) so instead of undefined is litterally puts my {{new.image}} as my path...maybe write a bit of code to convert into the actual path?

Upvotes: 0

Views: 1505

Answers (1)

markthethomas
markthethomas

Reputation: 4431

You'll need to use ng-src instead of data-src, so:

<div ng-repeat="new in news" class="megafolio-container">
 <img id="entry-{{new.entry}}" ng-src="{{new.image}}" data-width="504" data-height="400" class="mega-entry"/>

EDIT: Seems to be working with above changes in http://jsfiddle.net/5c1v814c/

EDIT: To remove conflict with plugin, you'll need to transition this functionality elsewhere:

var iw = ent.find('.mega-entry-innerwrap')
                    /*if (opt.ie) {
                        iw.append('<img class="ieimg" src='+ent.data("src")+'>');
                    } else {*/
                        iw.css({'background':'url('+ent.data("src")+')','backgroundPosition':'50% 49%', 'backgroundSize':'cover', 'background-repeat':'no-repeat'});

At the very least: remove the css setter attr ({'background':'url('+ent.data("src")+') and see if that causes the conflict.

Upvotes: 0

Related Questions