javascript - jTinder 库不能与 AngularJS 一起正常工作

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 指令复制实际将图像添加到 View 的代码。我还添加了 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 服务 从 JSON 文件中提取数据并将其加载到我的 Controller 中。

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

Answer 1

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

根据您想要的结果，您可以向 div 添加一些额外的样式(就像在另一个 SO question 中一样)，或者您可以将 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而不是在常规 style-attribute 中添加表达式，如果数据没有立即准备好供 Angular 使用，这可能会导致浏览器开始从一些随机 url 加载图像。所以也许最好这样写:

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