ID trường động dạng góc AngularJS với chỉ thị không hoạt động

Question

Khi cố gắng thêm chỉ thị vào đầu vào có id động, phương thức liên kết không liên kết đúng với đối tượng. Căn cứ vào sau jsfiddle hay html:

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

Và 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 
} 

Những gì tôi nhìn thấy trên debugger console là khi liên kết được gọi là nó được hiển thị id theo nghĩa đen là "datepicker - {{id }} "và không phải" datepicker-7 ".

Có cách nào để buộc điều này xảy ra không? Một cách tốt hơn để thực hiện điều này?

Cập nhật: Nên làm rõ. Trình hiển thị ngày tháng hiển thị khi được nhấp, nhưng nhấp vào ngày không hoạt động. Tôi nhận được lỗi: "Uncaught Thiếu dữ liệu cá thể cho thanh công cụ này"

Answer 1

Tôi tin rằng bạn cần transclude:true trong đối tượng trả về chỉ thị của bạn, cho phép xử lý trước đánh dấu cho những thứ như liên kết {{ }}.

Bạn cũng cần kết thúc cuộc gọi đến datepicker() trong một $timeout để trì hoãn nỗ lực cho đến khi chu kỳ góc tiếp theo chạy, đảm bảo rằng ID được dịch được đặt trong DOM.

này đã làm việc cho tôi trong 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 
}