帶指令不起作用的AngularJS動態表單字段ID

Question

當試圖向具有動態id的輸入添加指令時，鏈接方法未正確綁定到對象。鑑於以下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 
} 

我看到控制檯調試器，當鏈路被稱爲它顯示的ID字面上的「日期選擇器 - {{ID }}「而不是」datepicker-7「。

有沒有辦法強制這種情況發生？一個更好的方法來實現這個？

更新：應該澄清。日期選擇器在點擊時顯示，但點擊日期不起作用。我得到的錯誤：「未知的缺失此日期選擇器的實例數據」

Answer 1

我相信你需要transclude:true在你的指令返回對象，它告訴角預處理標記的東西，如{{ }}綁定。

您還需要將datepicker()的呼叫打包到$timeout中，以延遲嘗試，直到下一個角度循環運行，確保在DOM中設置轉換的ID。

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