UPDATE Plunker to project: http://plnkr.co/edit/oKB96szQhqwpKQbOGUDw?p=preview
I have an AngularJS project that uses AngularJS Bootstrap grids.
I need all of the
grid elements to have the same size so they stack properly.
I created an angularJs directive that auto resizes the
grid element when placed in said
grid element.
I have 2 directives that do this for me
Directive 1: onload
Directive 2: imageonload
Directive 2 works. If the
grid element uses an image, after the image loads then the directive triggers an event that sends the
grid elements height to all other
grid elements. If that height sent out via the event is greater than that of the
grid element which is listening to the event then that listening
grid element changes it's height to be the greater height. This way the largest height becomes the height for all the
grid elements.
Directive 1 does not work. This
one is placed on the outer most
grid elements html element, and is triggered when the element loads. The problem is that when the element loads and the onload directive is called AngularJS has not yet filled out the data in said
grid element. The outcome is that the real height after AngularJS data binds is not broadcast as an event.
My only solution I have thought of (but haven't tried) is to add an image url to an image that exists but doesn't have any data in it, and place that in the
grid element (the
one that didn't have any images before placing the blank
one in). I could then call imageonload instead of onload and I pretty sure the angularjs data binding will have taken place by then.
the problem is that that is pretty hacky. I would rather be able to have not an image in the
grid element, and be able to call my custom onload directive and have the onload directive calculate the height AFTER angularJS data binds to all of the data binding variables in the
grid element.
Here is my imageonload directive
.directive('imageonload', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.heightArray = [];
scope.largestHeight = 50;
element.bind('load', function() {
broadcastThumbnailHeight();
});
scope.$on('imageOnLoadEvent', function(caller, value){
var el = angular.element(element);
var id = el.prop('id');
var pageName = el.prop('title');
if(pageName == value[0]){
if(scope.largestHeight < value[1]){
scope.largestHeight = value[1];
var nestedString = el.prop('alt');
if(nestedString == "")
nestedString = "1";
var nested = parseInt(nestedString);
nested = nested - 1;
var inte = 0;
var thumbnail = el["0"];
var finalThumbnailContainer = thumbnail.parentElement;
while(inte != nested){
finalThumbnailContainer = finalThumbnailContainer.parentElement;
inte++;
}
var innerEl = angular.element(finalThumbnailContainer);
var height = value[1];
innerEl.height(height);
}
}
});
scope.$on('findHeightAndBroadcast', function(){
broadcastThumbnailHeight();
});
scope.$on('resetThumbnailHeight', function(){
scope.largestHeight = 50;
});
function broadcastThumbnailHeight(){
var el = angular.element(element);
var id = el.prop('id');
var alt = el.prop('alt');
if(alt == "")
alt = "1";
var nested = parseInt(alt);
nested = nested - 1;
var pageName = el.prop('title');
var inte = 1;
var thumbnail = el["0"];
var finalThumbnail = thumbnail.parentElement;
while(inte != nested){
finalThumbnail = finalThumbnail.parentElement;
inte++;
}
var elZero = el["0"];
var clientHeight = finalThumbnail.clientHeight;
var arr = [];
arr[0] = pageName;
arr[1] = clientHeight;
$rootScope.$broadcast('imageOnLoadEvent', arr);
}
}
};
})
And
here is my onload directive
.directive('onload', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.largestHeight=100;
getHeightAndBroadcast();
scope.$on('onLoadEvent', function(caller, value){
var el = angular.element(element);
var id = el.prop('id');
var pageName = el.prop('title');
if(pageName == value[0]){
if(scope.largestHeight < value[1]){
scope.largestHeight = value[1];
var height = value[1];
el.height(height);
}
}
});
function getHeightAndBroadcast(){
var el = angular.element(element);
var h = el["0"].children;
var thumbnailHeightElement = angular.element(h);
var pageName = el.prop("title");
var clientHeight = thumbnailHeightElement["0"].clientHeight;
var arr = [];
arr[0] = pageName;
arr[1] = clientHeight;
if(clientHeight != undefined)
$rootScope.$broadcast('onLoadEvent', arr);
}
}
};
})
Here is an example of
one of my
grid elements that uses imageonload. Note the imageonload directive in the image html element. This works. There is also an onload directive on the outer most html of the
grid element. That does not work. I have stepped through this carefully in Firebug and saw that the onload was calculating the height before AngularJS data binding was complete.
<div class="thumbnail col-md-3" id="{{product.id}}" title="thumbnailAdminProductsGrid" onload>
<div class="row">
<div class="containerz">
<div class="row-fluid">
<div class="col-md-2"></div>
<div class="col-md-7">
<div class="textcenterinline">
<!--tag--><img class="img-responsive" id="{{product.id}}" title="imageAdminProductsGrid" alt=6 ng-src="{{product.baseImage}}" imageonload/><!--end tag-->
</div>
</div>
</div>
<div class="caption">
<div class="testing">
<div class="row-fluid">
<div class="col-md-12">
<h3 class="">
<!--tag--><a href="javascript:void(0);" ng-click="loadProductView('{{product.id}}')">{{product.name}}</a><!--end tag-->
</h3>
</div>
</div>
<div class="row-fluid">
<div class="col-md-12">
<p class="lead"><!--tag--> {{product.price}}</p><!--end tag-->
</div>
</div>
<div class="row-fluid">
<div class="col-md-12">
<p><!--tag-->{{product.inStock}} units available<!--end tag--></p>
</div>
</div>
<div class="row-fluid">
<div class="col-md-12">
<p class=""><!--tag-->{{product.generalDescription}}<!--end tag--></p>
</div>
</div>
<!--tag-->
<div data-ng-if="product.specialized=='true'">
<div class="row-fluid">
<div class="col-md-12" ng-repeat="varCat in product.varietyCategoriesAndOptions">
<b><h4>{{varCat.varietyCategoryName}}</h4></b>
<select ng-model="varCat.varietyCategoryOption" ng-options="value.varietyCategoryOptionId as value.varietyCategoryOptionValue for (key,value) in varCat.varietyCategoryOptions">
</select>
</div>
</div>
</div>
<!--end tag-->
<div class="row-fluid">
<div class="col-md-12">
<!--tag--><div ng-if="product.weight==0"><b>Free Shipping</b></div><!--end tag-->
</div>
</div>
</div>
</div>
</div>
</div>
Here is an example of
one of the html for
one of my
grid elements that only uses the "onload" directive and not "imageonload"
<div class="thumbnail col-md-3" title="thumbnailCouponGrid" onload>
<div class="innnerContainer">
<div class="text-center">
{{coupon.name}}
<br />
<br />
<b>Description</b>
<br />
{{coupon.description}}
<br />
<br />
<button class="btn btn-large btn-primary" ng-click="goToCoupon()">View Coupon Details</button>
</div>
</div>
The imageonload function might look a little confusing because I use the img html attribute "alt" to signal to the directive how many levels the imageonload is placed below the outermost html for the
grid element. We have to have this so the directive knows which html element to set the new height on. also I use the "title" attribute to set which
grid this
grid resizing is for (that way you can use the directive multiple times on the same page for different grids and not have the events for the wrong
grid triggered).
Does anyone know how I can get the "onload" directive to get called AFTER angularJS binds to the
grid element?
Just for completeness here are 2 images (almost looks like just 1), the second is a
grid that contains
grid elements that have images and use the "imageonload" directive and the first is a
grid that contains
grid elements that do not use images and only uses the "onload" directive.
