निर्देशक के साथ कोणीय जेएस गतिशील फॉर्म फ़ील्ड आईडी

Question

गतिशील आईडी के साथ इनपुट में निर्देश जोड़ने का प्रयास करते समय, लिंक विधि ऑब्जेक्ट से ठीक से बाध्य नहीं होती है। यह देखते हुए निम्नलिखित jsfiddle या html:

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <p>Date: <input type="text" id="datepicker-{{id}}" datepicker></p>  
</div> 

और js:

var module = angular.module('myApp', []); 

module.directive('datepicker', function() { 
    var linker = function(scope, element, attrs) { 
    element.datepicker(); 
    } 

    return { 
    restrict: 'A', 
    link: linker 
    } 
}); 

function MyCtrl($scope) { 
    $scope.id = 7 
} 

क्या मैं कंसोल डिबगर पर देखते हैं कि लिंक कहा जाता है जब यह सचमुच आईडी दिखाया जा रहा है के रूप में "datepicker - {{आईडी }} "और नहीं" डेटपिकर -7 "।

क्या ऐसा होने के लिए मजबूर करने का कोई तरीका है? इसे लागू करने का एक बेहतर तरीका?

अद्यतन: स्पष्ट होना चाहिए था। दिनांक क्लिक करने पर डेटपिकर दिखाई देता है, लेकिन किसी दिनांक पर क्लिक करने से कार्य नहीं होता है।

Answer 1

मेरा मानना ​​है कि आप अपने निर्देश वापसी वस्तु है, जो preprocess करने {{ }} बाइंडिंग जैसी चीजों के लिए मार्कअप कोणीय बताता में transclude:true की जरूरत है "इस datepicker के लिए Uncaught गुम उदाहरण डेटा": मैं त्रुटि मिलती है।

आपको अगली कोणीय चक्र तक चलने तक प्रयास में देरी करने के लिए में पर कॉल को लपेटने की भी आवश्यकता है, यह सुनिश्चित करना कि ट्रांसक्यूड आईडी डीओएम में सेट हो।

यह निरीक्षण तत्व टैब पर jsfiddle

var module = angular.module('myApp', []); 

module.directive('datepicker', function($timeout) { 
    var linker = function(scope, element, attrs) { 
     $timeout(function(){ 
      element.datepicker(); 
     }); 
    } 

    return { 
     restrict: 'A', 
     link: linker, 
     transclude: true 
    } 
}); 

function MyCtrl($scope) { 
    $scope.id = 7 
}