AngularJS ID campo modulo dinamico con una direttiva non funzionante

Quando si tenta di aggiungere una direttiva a un input con un ID dinamico, il metodo di collegamento non si associa correttamente all’object. Dato il seguente jsfiddle o html:

 

E 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 } 

Quello che vedo sul debugger della console è che quando viene chiamato il link mostra l’id letteralmente “datepicker – {{id}}” e non “datepicker-7”.

C’è un modo per forzare questo a succedere? Un modo migliore per implementare questo?

Aggiornamento : dovrebbe avere chiarito. Il datepicker appare quando si fa clic, ma il clic su una data non funziona. Ottengo l’errore: “Dati di istanza mancanti non rilevati per questo datepicker”

Credo che sia necessario transclude:true nel proprio object return, che dice all’angular di pre-processare il markup per cose come {{ }} binding.

È inoltre necessario racchiudere la chiamata a datepicker() in un $timeout per ritardare il tentativo fino all’esecuzione del ciclo angular successivo, assicurandosi che l’ID translcuded sia impostato nel DOM.

Questo ha funzionato per me in 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 }