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