Die jTinder-Bibliothek funktioniert nicht ordnungsgemäß mit AngularJS

Question

Konnten Sie dieses Problem lösen? Ich habe das gleiche Problem. Ich denke, jTinder ist eine großartige JS-Bibliothek, aber die Art, wie ihre CSS-Bibliothek gebaut wurde, ist nicht skalierbar. Ich habe versucht, diese Bibliothek in meine AngularJS App zu integrieren, aber es funktioniert nicht so, wie ich es möchte. Hier ist mein HTML-Code für meine Artikelliste Schleifen:

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

Wenn Sie genau hinsehen bei jTinder ‚s CSS-Datei (der letzte Abschnitt des Stylesheets, wo die Bilder geladen werden #tinderslide .pane5 .img{...} CSS-Klassen), werden Sie Beachten Sie, dass ich versuche, den Code, der das Bild tatsächlich zur View hinzufügt, mithilfe der AngularJS-Anweisung ng-repeat zu replizieren. Ich füge auch inline CSS hinzu. Aber es funktioniert nicht. Mein Produktname wird richtig geladen, aber das Bild wird nicht geladen.

Hier ist mein Beispieldatum

{ 
    "_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" 
} 

ich ein AngularJS Service bin mit den Daten aus einer JSON Datei zu ziehen und es in meinen Controller zu laden.

Bitte helfen Sie mir, dies zu lösen. Danke

Answer 1

Ihre Hintergrund-URLs werden problemlos gelöst, das Problem ist, dass das Div, das Sie verwenden, um das Bild anzuzeigen, 0 Breite und Höhe hat und daher kein Hintergrund angezeigt wird.

Je nachdem, was Sie wollen das Ergebnis aussehen, könnten Sie entweder einige zusätzliche Styling zum div (wie in diesem anderen SO question) hinzufügen, oder Sie können nur alle anderen Elemente in der div wickeln mit dem Hintergrund wie

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

Als Randbemerkung, mögen Sie vielleicht in die ngStyle directive suchen, anstatt den Ausdruck in regelmäßigem Stil-Attribute hinzuzufügen, die den Browser kann Bild von einigen zufälligen URLs starten Laden, wenn die Daten nicht sofort bereit für eckig benutzen. Also wäre es vielleicht besser zu schreiben:

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