AngularJS Example:
HTML
<div ng-controller="UserController" ng-app="myApp">
<div ng-repeat="re in recipes">
<div background-image-directive="{{re.url}}" style="height: 100px"></div>
</div>
</div>
JavaScript
var app = angular.module('myApp', []);
app.controller("UserController", function ($scope) {
$scope.recipes =
[
{
"type": "Breakfast",
"title": "Chili con carne",
"description": "A spicy and fragrant chili with ground beef, kidney beans, tomatoes, onions and garlic. Best served over rice with a dollop of sour cream and some cheese on top.",
"ratings": 4,
"duration": 12,
"level": "medium",
"url": "http://31.media.tumblr.com/bc0ea7c5f95701bff499f78b59d23e68/tumblr_mr74z9Lt3O1rs0z5go1_500.jpg",
"ingredients":
[
{
"vegetable": "40ml"
}
],
"method":
[
{
"1": "In a medium sized stock pot, heat the oil over heat. Saute onions, chile peppers andgarlic until soft."
}
]
},
{
"type": "Breakfast",
"title": "Spicy Indomie",
"description": "A spicy and fragrant chili with ground beef, kidney beans, tomatoes, onions and garlic. Best served over rice with a dollop of sour cream and some cheese on top.",
"ratings": 5,
"duration": 30,
"level": "hot",
"url": "http://38.media.tumblr.com/875b5eeb5b1efa37d2e9d36fbad836d3/tumblr_mzczesVrZD1rimr6yo1_1280.jpg",
"ingredients":
[
{
"vegetable": "40ml"
}
],
"method":
[
{
"1": "In a sized stock pot, heat the oil over heat. Saute onions, chile peppers andgarlic until soft."
}
]
}
];
});
app.directive('backgroundImageDirective', function () {
return function (scope, element, attrs) {
element.css({
'background-image': 'url(' + attrs.backgroundImageDirective +...