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?
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);
});
}
};
});
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.
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.