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.
