How to manipulate CSS property in Angular JS

Question

How to manipulate CSS property in Angular JS

Navigation

#1 by (3 votes)

1

I have a function written with jQuery (not Angled) to do the scaling of the minimum height of a div that 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 so as not to give a 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. It turns out I do not know how to get that same result with angular. I know that Angular DOM manipulations need to be done in directives.

I found two problems then: this function does not only depend on the element "main container", 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 those 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 enable this behavior in certain cases and so on.

How can I do this in angular js? I've been thinking about it for two weeks now and so far I have not achieved anything.

javascript angularjs

asked by anonymous 02.06.2014 / 21:45

1 answer

Design for iPad and iPhone Table inside tabs. Rules

score 3 · Answer 1

Using ng-class .

I was "so ready" to answer in the SOzion , which I took advantage of until JSFiddle:

Demo: link

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% central% will change according to the bool set in its scope.