Using the Multiple Datepicker Command in Angular

Question

I used several datepicker in the angular directive, and this gives me an error Unreduced instance data for the missing datepicker instance , because if I deleted one li, it will not set the id in the directive.

directive.js

app.directive('datepicker', function () { return { link: function($scope, element, attrs) { setTimeout(function() { $("#"+attrs.id).live('focus',function(){ console.log(attrs.id); }); }); } } 

index.html

 <tr ng-repeat="payment in invoice.payment" id="payment"> <td> <input class="payment_date" id="{{$index}}" placeholder="Payment Date" type="text" ng-model="payment.date" datepicker/> <br /> </td> </tr> 

How to set identifier in directive.js file?

Answer 1

I think you want to know when you can "get" (not "set") the identifier in the directive. Here's how to do it:

 app.directive('datepicker', function () { return { link: function($scope, element, attrs) { element.bind('focus', function (){ console.log(attrs.id); }); } }; }); 

Answer 2

You should look at http://docs.angularjs.org/guide/directive#Attributes . At the binding stage, it is not yet defined.

Also, I don't think you need to use an ID selector, as you are simply attaching your event to element in your link function.

Answer 3

Have you looked at AngularUI ? Then you can use jQuery pass-through without creating your own directive (I also added ui-options as an example if you decide to use it). Here's what it looks like:

 <input class="payment_date" ui-jq="datepicker" ui-options="{dateFormat:'dd-mm-yy'}" placeholder="Payment Date" type="text" ng-model="payment.date" /> 

Regarding the placement of the identifier on it, I'm not sure why you need it. If you want to get the value of the selected date, instead:

 var myDate = $("#"+myIndex).val(); 

You must do this:

 var myDate = invoice.payment[myIndex].date; 

This is the beauty of angular, you do not need to use the DOM here. Let me know if you have any questions and I will be happy to answer them.