angularjs set height of div based on width - html

Question

I am trying to set the height of a div based on its width, and then applying a multiplication factor. I am using angularjs in my code, and I need to use the class to base the directive on.
my html is as follows:
<div ng-class="(box.banner) ? 'bannerbox col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4' : 'cardbox col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4'" ng-repeat="box in boxes">
If the div is a bannerbox (ie has the bannerbox class) then I need the height of this div to be 1.08571 * the width. I understand I need to do this using a directive, but not sure where I am going wrong. My directive code is as follows:
app.directive('bannerbox', function () {
return {
restrict: "C",
link: function (scope, element) {
element.height(element.width * 1.08571);
}
}
});
Any help would be much appreciated!

Answer 1

You need to watch for the width of the element because the width's value is zero initially.
When the link function is called, the width of the element is zero.
Assuming you're using angularJs and jQuery:
app.directive('bannerbox', function () {
return {
restrict: "A",
link: function (scope, element) {
scope.getWidth = function () {
return $(element).width();
};
scope.$watch(scope.getWidth, function (width) {
// Do your work with the element width.
// Be careful not to change the width of the element or you will create an infinite loop.
// Set the height of the element.
});
}
}
});
Working JsFiddle example here : http://jsfiddle.net/ZtQ2p/