Question

我尝试使用Angular Ng-repeat从范围重复对象（每个对象有4个属性：条目，标题，图像，链接）。当我在Chrome开发者工具中查看html时，一切似乎都在那里，除了图像没有显示在页面上。我也使用fancybox和themepunch。如果我不使用Angular重复并在我的代码中手动编写html，它可以正常工作。我认为问题可能出在data-src和angular不喜欢这个问题上，但却无法找到证明我理论的东西。也可能是类添加的mega-entry-innerwrap加载页面...我不知道我检查了很多东西（尝试用ng-src替换data-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>

这是JS脚本......（我只包含了一个缩短这篇文章的对象）

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

];

}]);

下面的网址应该显示http://example.com/images/entry7.jpg，而不是下面的乱码。

<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上检查项目。 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'});
                    //}

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

background：url（http://www.example.com:8080/%7B%7Bnew.image%7D%7D）所以不是undefined，而是将我的{{new.image}}作为我的路径...也许写一些代码转换成实际的路径？

Answer 1

您需要使用ng-src代替data-src，所以：

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

编辑：似乎正在处理http://jsfiddle.net/5c1v814c/

中的上述更改

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

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.data("src")+')并查看是否会导致冲突。

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

1 个答案: