Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Problema ao adicionar elementos dinamicamente

Boa noite, tudo bem?

Estou adicionando elementos dinamicamente em minha aplicação e me deparei com um problema ao qual não consigo resolver.

O problema é o seguinte:

  • O usuário seleciona a "Condição de Pagamento" para uma determinada venda e, de acordo com a opção selecionada, eu adiciono 1 ou mais parcelas na tela.

Até aqui tudo bem. Os elementos já estão aparecendo na tela conforme necessário. O problema é que, entre os elementos, tenho um específico, que é uma diretiva pronta, importada para uso dentro da aplicação. Essa diretiva requer alguns métodos de apoio dentro do controller para que possa funcionar corretamente. O problema é que, para cada diretiva nova (uib-datepicker), eu preciso também adicionar os métodos que darão apoio ao seu funcionamento.

Acho que ficou claro. Peço que me ajudem!

Abaixo segue um exemplo do código para adicionar novos elementos:

function addParcela() {
     var novaParcela = `<div class="row">
                            <div class="form-group col-md-3" style="padding-bottom: 0; margin-bottom: 0;">
                                <label for="data-vencimento">Data de vencimento</label>
                                <p class="input-group">
                                    <input type="text" class="form-control" id="data-vencimento" uib-datepicker-popup="dd/MM/yyyy" is-open="vm.popup.opened" 
                                           show-button-bar="false" ui-mask="99/99/9999" datepicker-options="vm.opcoes" ng-model="vm.novaParcela.data"/>
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-default" ng-click="vm.open()"><i class="fa fa-calendar"></i></button>
                                    </span>
                                </p>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="obs-parcela">Observações da parcela</label>
                                <input type="text" class="form-control" id="obs-parcela"/>
                            </div>
                        </div>`;

    $('#parcelas').prepend($compile(novaParcela)($scope));
 }

Esse é um método de apoio que a diretiva precisa, por exemplo:

function open() {
     vm.popup.opened = true;
}
3 respostas

Opa Wh, de vez em quando, em dúvidas muito específicas, o fórum falha em ajudar o aluno, justamente porque é um cenário que a maioria das pessoas nunca passou. Vou ver se alguém consegue te ajudar, mas precisamos lidar com o fato que talvez essa dúvida não tenha resposta aqui dentro :(.

Não ficou claro para mim se addParcelas é método do controller ou de uma diretiva. Fiquei na dúvida, porque o Angular não aconselha manipular DOM em métodos de controllers, apenas diretivas. Talvez seja esse o problema.

solução!

Boa noite, Alberto e Flávio!

Obrigado pela atenção dos dois em responder.

Então, ui-datepicker é uma diretiva que eu importei para dentro do meu projeto e que representa, basicamente, um calendário.

O problema era na forma como eu estava trabalhando o evento de abertura do meu calendário. Quando postei a dúvida, eu pensava que, para cada ui-datepicker, eu deveria adicionar uma função de apoio no controller, que não faria NADA além de setar uma variável booleana para true. Como eu não tenho controle sobre quantas parcelas (e calendários para as datas de vencimento destas parcelas) serão geradas, eu estava tentando criar uma solução mirabolante, como a que gerou a dúvida.

A solução encontrada foi fazer com que o(s) pop-up(s) do(s) calendário(s) abrisse(m) assim que o(s) campo(s) recebesse(m) foco, sem a necessidade de uma função para isso no controller.

Ficou assim:

<input type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" is-open="parc.dataop" ng-focus="parc.dataop = true" show-button-bar="false" ui-date-mask="99/99/9999" datepicker-options="vm.opcoes" ng-model="parc.data"/>

E esse código é adicionado de acordo com a quantidade de parcelas escolhidas pelo usuário, dentro de um ng-repeat.