Question

你能解决这个问题吗？我有同样的问题。我认为jTinder是一个很棒的JS库，但是他们构建css库的方式是不可扩展的。我一直在尝试将此库集成到我的AngularJS应用中，但它并没有按照我希望的方式工作。这是我的循环浏览项目列表的HTML代码：

    <li  ng-repeat="item in items | orderBy:'-likes'" ui-sref="feeds">
         <div  style="background: url('{{item.picture}}') no-repeat scroll center center; background-size: cover;"></div>
         <div>{{item.productName}}</div>
         <span class="pull-right fa fa-star" style="color:#3685B0"></span>
         <div class="like"></div>
         <div class="dislike"></div>
   </li>

如果你仔细查看jTinder的CSS文件（使用CSS类#tinderslide .pane5 .img{...}加载图像的样式表的最后一部分），你会发现我是尝试使用AngularJS ng-repeat指令复制实际将图像添加到视图的代码。我还要添加inline CSS。但它没有用。我的产品名称已正确加载，但未加载图像。

这是我的示例数据

 {
    "_id": "5702bdbce518778bbc5add77",
    "index": 1,
    "guid": "694aafa9-b641-478a-a258-c2f0989f20dc",
    "isOnsale": true,
    "price": "$439.53",
    "saleprice": "$22.73",
    "picture": "https://s-media-cache-ak0.pinimg.com/564x/d7/24/f2/d724f20fb401e010d601842584b5419f.jpg",
    "review": 4,
    "size": "L",
    "brand": "GUESS",
    "productType": "BEAUTY",
    "category": "SWEATERS",
    "productName": "Guess Men's Grey Sweater Two-Tones",
    "company": "LUXURIA",
    "phone": "+1 (842) 527-3928",
    "address": "674 Autumn Avenue, Haena, Massachusetts, 471",
    "likes": 34,
    "comment_count": 6,
    "description": "Eu exercitation labore sint laborum nisi consequat pariatur sunt. Ullamco sit dolor velit ea excepteur cupidatat amet id Lorem anim enim consectetur ipsum eu. Laboris Lorem id exercitation occaecat irure aliquip veniam in ut. Esse velit occaecat cillum fugiat mollit ullamco do non cupidatat nulla ea esse aliquip cupidatat. Consectetur duis laborum fugiat laboris. Adipisicing fugiat dolor velit incididunt. Fugiat nisi dolor consequat amet et sint et aliquip qui consectetur.",
    "comments": "Non et elit ullamco est officia in. Velit ut nisi sunt mollit. Adipisicing est amet ipsum anim. Sunt aliquip irure aliqua non labore ut nulla.\n\nIrure fugiat ullamco enim elit sunt exercitation nisi. Ex consequat amet velit do ea veniam Lorem anim ipsum dolore ipsum aliqua culpa irure. Mollit irure aliquip ad elit ut consectetur proident amet et veniam nulla deserunt cupidatat culpa. Do duis sit elit voluptate fugiat anim ad id irure. Deserunt amet veniam nisi non.",
    "registered": "Sunday, November 2, 2014 12:41 PM",
    "latitude": "-6.226487",
    "longitude": "-111.623657"
}

我使用AngularJS Service从JSON文件中提取数据并将其加载到我的控制器中。

请帮我解决这个问题。感谢

Answer 1

你的背景网址得到了很好的解决，问题是你用来显示图片的div有0宽度和高度，因此没有显示背景。

根据你想要的结果，你可以在div中添加一些额外的样式（就像在另一个SO question中那样），或者你可以用div来包装div中的所有其他元素像

<li  ng-repeat="item in items | orderBy:'-likes'" ui-sref="feeds">
     <div  style="background: url('{{item.picture}}') no-repeat scroll center center; background-size: cover;">
         <div>{{item.productName}}</div>
         <span class="pull-right fa fa-star" style="color:#3685B0"></span>
         <div class="like"></div>
         <div class="dislike"></div>
     </div>
</li>

作为旁注，您可能需要查看ngStyle directive，而不是在常规样式属性中添加表达式，这可能会导致浏览器开始从一些随机URL加载图像（如果数据没有立即准备好）用于角度。所以也许最好写一下：

<div ng-style="{ background: 'url(\'' + item.picture + '\')' }" style="no-repeat scroll center center; background-size: cover;">

使用AngularJS时，jTinder库无法正常工作

1 个答案: