AngularJS C directive using ng-class - css

Question

The title might not explain what I am trying to achieve, so I will elaborate here.
I have a directive that is restricted to a CSS class name (in this example flex-wrap).
But this class is not applied to the element until we actually have some data.
The HTML for that looks like this:
<div class="row" ng-class="{ 'loading': !controller.loadingRecent, 'flex flex-vertical flex-wrap': controller.recent.length }">
<div class="col-md-12 row-title">
<h1>Recent orders</h1>
</div>
<div class="col-xs-12" ng-if="!controller.recent.length">
<div alert type="danger">
No records have been found that match your search.
</div>
</div>
<div class="col-md-4 tile-lg" ng-repeat="order in controller.recent" tile>
<a class="box-shadow" id="{{ order.orderNumber }}" ui-sref="viewOrder({ orderNumber: order.orderNumber })" coloured-tile>
<div class="text">
<p>
<strong>{{ order.account.accountNumber }}</strong><br />
{{ order.account.name }}<br />
{{ order.raisedBy }}<br />
{{ order.orderNumber }}<br />
{{ controller.getDescription(order) }}<br />
</p>
</div>
</a>
</div>
As you can see, the flex classes are not applied until our recent.length is greater than 0. What I would like to happen is that when we have records, the CSS class is applied and so the angular directive that is associated with that class fires.
Instead, it doesn't do anything at the moment.
Does anyone know how I can get my directive to fire?
Here is my directive, just so you can see it.
.directive('flexWrap', ['$window', '$timeout', function ($window, $timeout) {
// Sets the height of the element
var setHeight = function (element) {
// Declare our variables
var row = element.parent().parent(),
height = 630;
// If our row is a row
if (row.hasClass('row')) {
// Get the height of the rest of the items
height = height - getHeight(row);
}
console.log('height = ' + height);
// Set our elements height
element.css('height', height + 'px');
console.log('we are about to set the width');
// After we set the height, set the width
setWidth(element);
}
// Gets the height to minus off the total
var getHeight = function (element) {
// Declare our variables
var height = 0,
children = element.children(),
loopChildren = element.hasClass('row');
// Loop through the element children
for (var i = 0; i < children.length; i++) {
// Get the child
var child = angular.element(children[i]);
// If the child is not a column
if (!child.hasClass('columns')) {
// If we need to loop the children
if (loopChildren) {
// Get the height of the children
height += getHeight(child);
// Otherwise
} else {
// Add the height of the child to
height += child[0].offsetHeight;
}
}
}
// Return our height
return height;
};
// Sets the width of the element
var setWidth = function (element) {
// After a short period
$timeout(function () {
// Get our last child
var children = element.children(),
length = children.length,
lastChild = children[length - 1];
// Work out the width of the container
var position = element[0].getBoundingClientRect(),
childPosition = lastChild.getBoundingClientRect(),
width = childPosition.left - position.left + childPosition.width;
var style = $window.getComputedStyle(lastChild, null);
console.log(style.getPropertyValue('width'));
console.log('--------------------------------');
console.log(lastChild);
console.log(position);
console.log(childPosition);
console.log(width);
console.log('--------------------------------');
console.log('width = ' + width);
// Apply the width to the element
element.css('width', width + 'px');
}, 500);
};
// Resize the container
var resize = function (element, width) {
// If our width > 992
if (width > 992) {
// Resize our element
setHeight(element);
// Otherwise
} else {
// Set our element width and height to auto
element.css('height', 'auto');
element.css('width', 'auto');
}
};
return {
restrict: 'C',
link: function (scope, element) {
// Get our window
var window = angular.element($window),
width = $window.innerWidth;
// Bind to the resize function
window.bind('resize', function () {
// After half a second
$timeout(function () {
// Get the window width
width = $window.innerWidth;
// Resize our element
resize(element, width);
}, 500);
});
// Initial resize
resize(element, width);
}
};
}]);

Answer 1

Directive declaration style (e.g. restrict: "C") and an ng-class directive are not related to each other at all.
ng-class just adds/removes CSS class - it does not trigger a compilation/link of a directive that might be associated with these classes. In other words, it does not provide a way to dynamically instantiate a directive.
Your directive should handle the situation where data is not yet available. There are a number of ways to achieve that, via $scope.$broadcast/$scope.$on or via a service, or even via $watch - depending on any particular situation.