Javascript 具有Ng重复的图像的角度问题

我尝试使用Angular Ng repeat从作用域中重复对象，每个对象有4个属性：条目、标题、图像和链接。当我在Chrome开发者工具中检查html时，除了页面上没有显示图像外，所有的东西似乎都在那里。我也在使用fancybox和themepunch。如果我不使用Angular在代码中重复和手动编写html，那么效果很好。我认为问题可能在于数据src和angular不喜欢这个，但找不到任何东西来证明我的理论。也可能是添加了mega entry innerwrap的类与页面一起加载…我不知道我检查了很多东西，尝试用ng src替换数据src，但没有成功

这是html代码

<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>

下面的URL应该显示，而不是下面的胡言乱语

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

编辑：是的，下面的代码不能很好地处理Angular。所以现在正在研究一个解决方案。在运行NG Repeat之前，尝试预先加载带有承诺的图像，看看这是否有效……同时，如果您想尝试，可以在github上检查项目

编辑2：在mega entry innerwrap URL中，最接近未定义的方法是将数据src={{new.image}保留在div中，而不对themepunch代码执行任何操作。它在下面做这个

背景：url所以不是未定义的，而是把我的{{new.image}}作为我的路径…也许写一些代码转换成实际路径

您需要使用ng src而不是data src，因此：

编辑：似乎正在处理中的上述更改

编辑：要删除与插件的冲突，您需要将此功能转移到其他位置：

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

---

至少：删除css setter attr{'background'：'url'+ent.datasrc+'并查看这是否会导致冲突。

是否有理由在img元素上使用div的背景而不是ng src？是的，您需要使用ng src。是的，您已经在div上尝试了ng src，也尝试了更改为img，并且尝试了ng src和data src，但都没有太多成功。是否有人熟悉ng src插件themepunch和fancybox想知道它对ng source的反应如何？还有其他想法吗？看看我上面编辑的问题，让我知道你的想法！已经试过了。不起作用。我想问题可能是这两个插件在加载页面时如何添加一个新类，而不是加载图像路径，而是直接加载{new.image}字符作为图像的背景。还有其他想法吗？似乎在这里工作：；您正在处理哪些其他依赖项？是否可以发布您的bower清单？将图像url更改为外部占位符，以便不处理相对引用。框的动画及其框内显示的文本正在使用fancybox、 js和themepunch.megafolio加载图片作为背景，图片中有动画、标题和div中的链接。我唯一的问题和破坏整个事情的是，图像没有到达生成的代码，ng源代码似乎无法处理这些代码，数据src显然是没有角度依赖性的ependencies代码，看看我是否可以改变，但它们都缩小了，只是为了让事情变得更糟

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'});
                    //}

<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"/>

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