angular
HTML
<script src=" //ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.js"></script>
<div ng-app="myApp">
<script type="text/ng-template" id="templates/lorem-image.html">
<a href ng-repeat="image in images"
ng-bind-html="image.html">
{{image.html}}
</a>
</script>
This is ze demo<br />
<lorem height='200' count='3' text='titi' category='sports'></lorem>
</div>
JavaScript
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'ngSanitize',
'myApp.services',
'myApp.directives'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
/* Directives */
angular.module('myApp.directives',['ngSanitize','myApp.services']).
directive('lorem', function(imageBuilder) {
return {
restrict: 'EA',
scope:{
text:'@',
count:'@',
width:'@',
height:'@',
category:'@'
},
templateUrl:"templates/lorem-image.html",
controller: function($scope) {
$scope.images = imageBuilder.build($scope.width,
$scope.height,
$scope.category,
$scope.count,
$scope.text)
}
}
});
'use strict';
/* Services */
angular.module('myApp.services', []).service('urlBuilder', function() {
this.build = function (width,height,category,text,count){
var url='http://lorempixel.com/';
if (width == undefined) {
var width = '300';
}
url += width +'/';
if (height == undefined) {
var height = '200';
}
url += height;
if (category != undefined) {
url+= '/'+category;
}
if (text != undefined) {
url += '/'+text;
}
return url;
}
}).service('imageBuilder', function(urlBuilder) {
this.build = function(width,height,category,count,text){
var images = [];
var url = urlBuilder.build(width,height,category,text);
if (count == undefined) {
count = 1;
}
for (var i=0;i<count;i++) {
images.push({html:'<img src="'+url+'/?'+i+'">'});
}
return images;
}
})
;