1

Tenho uma função escrita com jQuery (sem Angular) pra fazer o redimensionamento da altura mínima de uma div que no caso é a div de conteúdo principal do layout de um aplicativo web. Essa função é necessária porque ela serve pra preencher o espaço todo pra não dar problema no 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');
        }
    }
};

Essa função é usada em vários lugares: quando uma nova página é carregada, no efeito dropdown dos menus da barra lateral e etc. Acontece que não sei como obter esse mesmo resultado com angular. Eu sei que manipulações do DOM com Angular precisam ser feitas em diretivas.

Achei dois problemas então: essa função não depende só do elemento "container principal", ela depende do header, do footer, da sidebar, da janela. O objeto window eu sei que pode ser abstraído com o serviço $window, mas ainda assim eu teria que lidar com todos esses outros elementos.

E o segundo problema é que essa função ter de ser chamada de outros lugares e em outros eventos. Então a diretiva do menu dropdown precisa ativar esse comportamento em certos casos e etc.

Como posso fazer isso no angular js ? Já estou pensando nisso há duas semanas e até agora não consegui nada.

1 Resposta 1

3

Usando ng-class.

Estava "tão pronta" a resposta no SOzão, que eu aproveitei até o 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>

Quando você clica o botão, a classe do div central vai mudar de acordo com o bool setado no seu escopo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .