How to manipulate CSS property in Angular JS

Question

I have a function written with jQuery (without Angular) to resize the minimum height of a div which in this case is the main content div of the layout of a web application. This function is necessary because it serves to fill the whole space to not give problem in the layout:

var resizePageContent = function() {
    var windowH         = $(window).height();
    var sidebarH        = sidebar.outerHeight();
    var sidebarAltH     = sidebarAlt.outerHeight();
    var headerH         = header.outerHeight();
    var footerH         = footer.outerHeight();

    // If we have a fixed sidebar/header layout or each sidebars’ height < window height
    if (header.hasClass('navbar-fixed-top') || header.hasClass('navbar-fixed-bottom') || ((sidebarH < windowH) && (sidebarAltH < windowH))) {
        if (page.hasClass('footer-fixed')) { // if footer is fixed don't remove its height
            pageContent.css('min-height', windowH - headerH + 'px');
        } else { // else if footer is static, remove its height
            pageContent.css('min-height', windowH - (headerH + footerH) + 'px');
        }
    }  else { // In any other case set #page-content height the same as biggest sidebar's height
        if (page.hasClass('footer-fixed')) { // if footer is fixed don't remove its height
            pageContent.css('min-height', ((sidebarH > sidebarAltH) ? sidebarH : sidebarAltH) - headerH + 'px');
        } else { // else if footer is static, remove its height
            pageContent.css('min-height', ((sidebarH > sidebarAltH) ? sidebarH : sidebarAltH) - (headerH + footerH) + 'px');
        }
    }
};

This function is used in several places: when a new page is loaded, in the dropdown effect of the sidebar menus and so on. I don’t know how to get this same result with an angle. I know that DOM manipulations with Angular need to be done in directives.

I found two problems then: this function does not depend only on the "main container" element, it depends on the header, footer, sidebar, window. The window object I know can be abstracted with the $window service, but still I would have to deal with all these other elements.

And the second problem is that this function has to be called from other places and at other events. So the dropdown menu directive needs to activate this behavior in certain cases and etc.

How can I do it in angular js ? I’ve been thinking about it for two weeks and so far I haven’t achieved anything.

Answer 1

Using ng-class.

I was "so ready" to reply in Sozão, that I enjoyed until Jsfiddle:

Demo: http://jsfiddle.net/rd13/eTTZj/75/

JS

app = angular.module('myApp', []);

app.directive("click", function () {
    return function(scope, element, attrs) {
        element.bind("click", function() {
            scope.boolChangeClass = !scope.boolChangeClass;
            scope.$apply();
        });
    };
});

HTML:

<div id="page">
    <div>Um</div>
    <div ng-class="{'my-class':boolChangeClass}">Dois</div>
    <div>Dezenove</div>
    <button click>Clique-me</button>
</div>

When you click the button, the class of div center will change according to the set bool in its scope.