Apply "datepicker" to element after angular call

Question

Apply "datepicker" to element after angular call

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

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

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

Calling 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 an "ng-repeat", a directive is not being used, is there any way to trigger an event after block loading?

angularjs angularjs-directives

asked by anonymous 14.11.2014 / 17:36

3 answers

how to set up a very extensive table Return the last entry of different Postgresql objects

score 1 · Answer 1

1

@helderburato

Try to do this:

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

and see if it solves your problems:)

14.11.2014 / 17:42

score 0 · Answer 2

Hello, to integrate Datepicker into AngularJS, the best way is to create a custom directive.

In the example below I created an angular app and included a directive of name "includingDatepicker" could be any name. The important thing is the call in the input. the name is separated by "-" ex. includes-datapicker as input tag attribute. if the directive with a name myDirAng = 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 this and it worked perfectly. the cool thing is that you need to keep calling the datepicker.

score 0 · Answer 3

In your HTML:

use ng-init!

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

And in your Angular Js:

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