ID campo modulo angolareJS con una direttiva non funzionante

Question

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

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

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 console è che quando il collegamento viene chiamato sta mostrando l'id letteralmente come "datepicker - {{id }} "e non" datepicker-7 ".

C'è un modo per forzare questo? 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: "non rilevate dati di istanza mancanti per questo datepicker"

Answer 1

Credo che hai bisogno transclude:true nell'oggetto direttiva rimpatri, che racconta angolare per pre-elaborare il markup per le cose come {{ }} attacchi.

È inoltre necessario disporre la chiamata su datepicker() in un $timeout per ritardare il tentativo fino all'esecuzione del ciclo angolare successivo, assicurandosi che l'ID traslocato sia impostato nel DOM.

questo ha lavorato 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 
}