1

Estou tendo um problema, ao carregar um bloco HTML da página via angular, os elementos que tem a classe ".datepicker", ativam o jquery do plugin "datepicker", porém, pelo que notei, a ação que faz o bind deste bloco, está ocorrendo depois do carregamento dos elementos.

Pesquisei a respeito, comentaram sobre o uso de $watch e $on, estamos chamando o HTML / JS do datepicker, da seguinte forma:

Chamada do datepicker:

$('.datepicker').datepicker():

Elemento ( Este elemento está dentro de um ng-controller e um ng-repeat ):

<input class="datepicker"  />

Este input está dentro de um "ng-controller" e em um "ng-repeat", não está sendo usado uma diretiva, existe alguma forma de disparar um evento após o carregamento do bloco?

3 Respostas 3

1

@helderburato

Tente fazer da seguinte maneira:

$(document).on('click','.datepicker',function() {
   $(this).datepicker();
}

e veja se resolve seus problemas :)

3
  • Na realidade, o problema está sendo, que este input, esta dentro de um NG-REPEAT, e simplesmente, não funciona o datepicker dentro dele. 14/11/2014 às 16:43
  • Então dê uma olhada nesse link em inglês do SO: stackoverflow.com/questions/14099267/… 14/11/2014 às 16:46
  • @helderburato nem a maneira q falei, nem o link não lhe serviram de nada? Caso tenha resolvido, poste uma resposta a sua pergunta para servir de base para outros futuramente. 14/11/2014 às 16:51
0

Olá para poder integrar o Datepicker no AngularJS a melhor saída é criando uma directive personalizada.

No exemplo abaixo eu criei uma app angular e inclui uma directive de nome "incluiDatepicker" poderia ser qualquer nome. O importante é a chamada no input. o nome fica separado por "-" ex. inclui-datapicker como atributo da tag input. se a directive com um nome minhaDirAng = minha-dir-ang.

//
app.directive('incluiDatepicker', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem) {
           elem.datepicker();
        }
    };
    });

<input type="text" id="nomedoId" incluir-datepicker>

Eu usei isso ai funcionou perfeitamente. o legal que você me precisa ficar chamando o datepicker.

1
  • 1
    Se sua resposta realmente resolve o problema proposto, se possível, elabore-a melhor, afinal a dúvida do OP hoje, se solucionada com sua resposta, evitaria duplicidade de conteúdo amanhã. ;) 18/12/2014 às 19:45
0

No seu HTML:

use ng-init!

<input ... class="datepicker" ng-init="initDatepicker()">

E no seu AngularJs:

$scope.initDatepicker = function() {
    $('.datepicker').pickadate({ 
        selectMonths: true, 
        selectYears: 15
    });
}

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 .