不工作指令的AngularJS动态表单字段ID

Question

当尝试使用动态id向输入添加指令时，链接方法不能正确绑定到对象。给定以下小提琴或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显示为“datepicker-{id}”，而不是"datepicker-7“。

有什么办法强迫这种事发生吗？一个更好的方法来实现这一点？

更新：应该已经澄清了。单击时会显示数据报警器，但单击日期不起作用。我得到了一个错误：“这个数据报警器缺少的实例数据”

Answer 1

我相信您需要在指令返回对象中使用transclude:true，它告诉角对诸如{{ }}绑定之类的东西的标记进行预处理。

您还需要将对datepicker()的调用包装在一个$timeout中，以将尝试推迟到下一个角度循环运行，确保在DOM中设置了已转换的ID。

这对我来说在小提琴很管用

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
}