2

Estou tendo um problema com a customização de um CSS, o AngularJS não permite que eu escreva um trecho de código da seguinte forma:

<style>
    .btn-n {
        min-height: {{botao.altura}}px;
        min-width: {{botao.largura}}px;
        border-radius: {{botao.cantos}}px;
        font-family: {{botao.fonte}};
        color: {{botao.corFonte}};
        background-color: {{botao.corFundo}};
    }

    .btn-n .btn-texto {
        font-size: {{botao.tamanhoFonte}}px;
    }

    #pagina-campanha .pagina-texto-inicial {
        font-family: {{pagina.textoInicialFonte}};
        font-size: {{pagina.textoInicialTamanhoFonte}}px;
        color: {{pagina.textoInicialCorFonte}};
    }

    #pagina-campanha .pagina-texto-link {
        font-family: {{pagina.textoLinkFonte}};
        font-size: {{pagina.textoLinkTamanhoFonte}}px;
        color: {{pagina.textoLinkCorFonte}};
    }

    #pagina-campanha .pagina-texto-final {
        font-family: {{pagina.textoFinalFonte}};
        font-size: {{pagina.textoFinalTamanhoFonte}}px;
        color: {{pagina.textoFinalCorFonte}};
    }

    #pagina-campanha .pagina-texto-informativo {
        font-family: {{pagina.textoInformativoFonte}};
        font-size: {{pagina.textoInformativoTamanhoFonte}}px;
        color: {{pagina.textoInformativoCorFonte}};
    }

    #pagina-campanha .btn-pagina {
        font-family: {{pagina.botoesFonte}};
        font-size: {{pagina.botoesTamanhoFonte}}px;
        background-color: {{pagina.botoesCorFundo}};
        border-color: {{pagina.botoesCorFundo}};
    }
</style>

Porém na minha aplicação preciso ir aplicando essas customizações conforme o usuário atualiza em um formulário. É muito tranquilo fazer com ng-style quando se tem três ou quatro propriedades, mas depois vira uma bagunça. Alguma sugestão?

3
  • Vc poderia em vez de alterar os atributos da classe, poderia trocar de classe. Manteria seu código mais simples e fácil de ler / editar. 16/11/2016 às 13:38
  • Problema é que eu tenho sete classes fixas, com mais ou menos sete atributos com valores variáveis.
    – Matt S
    16/11/2016 às 15:15
  • Angularjs é executado no cliente, para usar algo assim você precisaria fazer no server (.net, java, etc). Algo nativo do Angularjs que você pode usar é o ngStyle, desse jeito <elemento ng-style="{ 'height': minhaaltura+ '%' }"> 16/11/2016 às 15:22

3 Respostas 3

4

Isso não é possível apenas com a implementação cliente, já que a aplicação Angular é inicializada após as folhas de estilo serem processadas e disponibilizadas para consumo pelo DOM.

Você pode tentar integrar com uma implementação server-side, como o angularjs-server, que em teoria lhe permitiria implementar algo assim.

0
1

Olha, você pode colocar watchers, por exemplo, pra verificar se o model esse input está true ou false, por exemplo, e dependendo do valor vc pode passar um ng-class com a classe css que deseja aplicar.

Por exemplo:

<div ng-class="meuModel ? 'btn btn-lg' : 'btn btn-sm'"></div>

Só pra explicar melhor, ai eu estou fazendo uma expressão ternária, onde caso meu model seja true, eu vou passar o valor 'btn btn-lg', se for false, vou passar o valor 'btn btn-sm'.

Espero ter ajudado.

0

SUGESTÃO 1:

Você pode usar um controller diretamente no seu HTML e alterar apenas o href do seu link. Aqui está um Plunker exemplificando.

O código ficaria como abaixo:

index.html:

<!doctype html>
<html ng-app="appExemploCSS" ng-controller='EstiloController as estilo' >
  <head >
    <meta charset="utf-8">
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="{{estilo.href}}">

    <script src="http://code.angularjs.org/1.3.6/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <label>Este é o label de exemplo</label>
    <br>
    <br>
    <button ng-click="estilo.trocarEstilo(0)">Verde</button>
    <button ng-click="estilo.trocarEstilo(1)">Vermelho</button>
  </body>
</html>

app.js:

(function() {
  'use strict';

  angular
    .module('appExemploCSS', []);

  angular
    .module('appExemploCSS')
    .controller('EstiloController', EstiloController);

  EstiloController.$inject = [];

  function EstiloController() {
    var estilo = this;

    estilo.trocarEstilo = trocarEstilo;

    iniciar();

    function iniciar() {
      trocarEstilo(0);
    }

    function trocarEstilo(sequencia) {
      if (sequencia === 0) {
        estilo.href = 'estilo0.css';
      } else {
        estilo.href = 'estilo1.css';
      }
    }
  }
})();

estilo0.css:

label {
  font-weight: bold;
  color: green;
}

button {
  color: green;
}

estilo1.css:

label {
  font-weight: bold;
  color: red;
}

button {
  color: red;
}

SUGESTÃO 2:

Você pode colocar uma classe na camada mais alta do seu HTML e controlá-la, alterando os atributos dentro da do elemento desejado da seguinte forma:

(function() {
  'use strict';

  angular
    .module('appExemploCSS', []);

  angular
    .module('appExemploCSS')
    .controller('EstiloController', EstiloController);

  EstiloController.$inject = [];

  function EstiloController() {
    var estilo = this;

    estilo.trocarEstilo = trocarEstilo;

    iniciar();

    function iniciar() {
      trocarEstilo(0);
    }

    function trocarEstilo(sequencia) {
      if (sequencia === 0) {
        estilo.classePrincipal = 'estilo-0';
      } else {
        estilo.classePrincipal = 'estilo-1';
      }
    }
  }
})();
/* Tudo que não utilizar as classes
 * que podem ser trocadas será padrão para
 * todos os elementos do seletor 
 */
label.normal {
  font-weight: bold;
  color: blue;
}

/* Tudo abaixo da classe de controle
 * pode ser alterado conforme a necessidade
 */

/* estilo-0 */
div.estilo-0 label.normal {
  color: green;
}

div.estilo-0 button {
  color: green;
}

/* estilo-1 */
div.estilo-1 label.normal {
  color: red;
}

div.estilo-1 button {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appExemploCSS" ng-controller="EstiloController as estilo">
  <!-- Esta é a div que controlará os estilos -->
  <div ng-class="estilo.classePrincipal">
    <label class="normal">Este é o label de exemplo</label>
    <br>
    <br>
    <button ng-click="estilo.trocarEstilo(0)">Verde</button>
    <button ng-click="estilo.trocarEstilo(1)">Vermelho</button>
  </div>
</div>


OBSERVAÇÃO:

Para os dois métodos, caso precise enviar dados entre os controllers da aplicação utilize esta outra resposta que ensina a utilizar servicespara este fim: Angularjs - modal insere template com opções de radiobutton.

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 .