Apply "datepicker" to element after angular call

Question

I’m having a problem, when loading an HTML block from the page via the angular, the elements that have the class ". datepicker", activate the jquery of the plugin "datepicker", however, as I noticed, the action that binds this block, is occurring after loading the elements.

I researched about, commented on the use of $watch and $on, we are calling the datepicker HTML / JS, as follows:

Call from the datepicker:

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

Element ( This element is inside an ng-controller and an ng-repeat ):

<input class="datepicker"  />

This input is inside an "ng-controller" and in an "ng-repeat", a directive is not being used, there is some way to trigger an event after loading the block?

Answer 1

@helderburato

Try to do it this way:

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

and see if it solves your problems :)

Answer 2

In your HTML:

use ng-init!

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

And in your Angularjs:

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

Answer 3

Hello to integrate Datepicker in Angularjs the best way out is to create a custom Directive.

In the example below I created an angular app and includes a Directive named "incluiDatepicker" could be any name. The important thing is the call in the input. the name is separated by "-" e.g. includes-datapicker as input tag attribute. if Directive with a nameDirAng = my-dir-ang.

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

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

I used it so it worked perfectly. the cool that you need me to keep calling the datepicker.