Using Multiple Datepicker in Angular directive - jquery-ui

Question

I have used multiple datepicker in angular directive and it gives me an error
Uncaught Missing instance data for this datepicker because if I removed one li then It doesn't set id in 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 can I set ID in the directive.js?

Answer 1

I think you want to know when you can "get" (not "set") the ID in the directive. Here's how to do that:
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 linking phase, it is not defined yet.
Also, I don't think you need to use ID selector, as you simply attach your event against element in your link function.

Answer 3

Have you looked at using AngularUI? Then you can use the JQuery passthrough without having to create your own directive (I also added ui-options as an example in case you decide to use it). Here is what it would look like:
<input class="payment_date" ui-jq="datepicker" ui-options="{dateFormat:'dd-mm-yy'}" placeholder="Payment Date" type="text" ng-model="payment.date" />
As for putting an ID on it, I am not sure why you would need one. If you want to get the value of a selected date, instead of doing this:
var myDate = $("#"+myIndex).val();
You should do this:
var myDate = invoice.payment[myIndex].date;
That is the beauty of angular, no need to use the DOM here. Let me know if you have any questions and I will be happy to answer them.