Struggling with an issue in Angular as a newcomer. I'm utilizing masonry to create a dynamic assortment of images and videos in an ng-repeat and want to randomize the sizing classes for images. For instance, if an item in the ng-repeat is an image, apply one of two classes to it.
This is what I have so far for the template:
<div class="modalVid" ng-repeat="m in mediaList | filter:mediaType track by $index">
<a ng-if="m.type=='video'" zf-open="basicModal_{{$index}}" class="grid-item grid-item--video" ng-click="modalOpen()" style="background-image: url({{m.thumb}}); background-size: cover; background-repeat:no-repeat;"></a>
<a ng-if="m.type=='image'" zf-open="basicModal_{{$index}}" ng-class="grid-item" random-class ng-click="modalOpen()" style="background-image: url({{m.thumb}}); background-size: cover; background-repeat:no-repeat;"></a>
<div ng-if="m.type=='video'" class="" zf-modal="" id="basicModal_{{$index}}">
<iframe width="560" height="315" ng-src="{{iFrameSrc(v.videoid)}}" frameborder="0" allowfullscreen></iframe>
</div>
<div ng-if="m.type=='image'" zf-modal="" class="large" id="basicModal_{{$index}}">
<img src="{{m.screenshot}}">
</div>
I'm using a directive named random-class to add the class:
angular.module('mfApp')
.directive('randomClass', randomClass);
function randomClass(){
return {
restrict: 'AE',
require:'^mfMason',
link: function(scope, elem, attrs){
var classArr = ['grid-item--width2 grid-item--height2', 'grid-item--width1 grid-item--height1'];
var newClass = classArr[Math.floor(Math.random() * classArr.length)];
elem.addClass(newClass);
}
}
}
And the masonry wrapper itself is a directive:
angular.module('mfApp')
.directive('mfMason', mfMason);
function mfMason(){
return{
restrict: 'AE',
transclude:true,
templateUrl: 'templates/masonry_build.html',
controller:function($scope){
$scope.classes = ['grid-item--width2 grid-item--height2', 'grid-item--width1 grid-item--height1'];
},
link: function(scope, elem, attr){
var $grid = $('.grid').imagesLoaded(function(){
$grid.isotope({
itemSelector: '.grid-item',
columnWidth: 182,
gutter:1
});
});
}
};
}
Unfortunately, the code is not functioning correctly. I've attempted implementing solutions from other sources, like dynamically adding directives in ng-repeat, but haven't had success. I know there's still much about Angular, especially regarding directives, that I don't grasp fully, so any assistance would be greatly valued. Thank you!