Javascript 指令无效的AngularJS动态表单字段ID

尝试向具有动态id的输入添加指令时，link方法未正确绑定到对象。给定以下内容或html：

我在控制台调试器上看到的是，当调用link时，它将id字面上显示为“datepicker-{{id}}”，而不是“datepicker-7”

有没有办法迫使这一切发生？有更好的方法来实现这一点吗

---

更新：应已澄清。日期选择器在单击时显示，但单击日期不起作用。我得到了一个错误：“未捕获缺少此日期选择器的实例数据”

我认为您需要在指令返回对象中使用

transclude:true

，它告诉angular对

{}

绑定之类的标记进行预处理

您还需要将对

datepicker（）

的调用包装在

$timeout

中，以将尝试延迟到下一个角度循环运行，确保在DOM中设置了transcuded ID

这对我来说很有用

---

inspect element选项卡上的id仍然显示'datepicker={{id}}'应该已经澄清。日期选择器在单击时显示，但单击日期不会显示。这仍然不能让它工作。我得到一个错误：“此datepicker未捕获缺少实例数据”@DeepankarBajpeyi有趣的是，id显示为datepicker-7对我来说，你确定你正在查看的JSFIDLE已经转移了吗？@craineum抱歉，我错过了你问题的这一部分。我在您调用datepicker的地方添加了一个$timeout包装器，它似乎可以工作。将更新答案。据我所知，$timeout延迟调用内部函数，直到下一个角度循环。我想如果没有它，datepicker（）是在angular转移元素ID之前被调用的。将它包装在$timeout中可以确保在尝试datepicker对其进行初始化之前设置了正确的ID。就是这样。有了它，你也不需要转移，可以从你的答案中删除它。令人惊叹的！谢谢

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

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
}

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
}