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显示为"datepicker - {{id}}"而不是"datepicker-7".

有没有办法强迫这种情况发生？实现这个的更好方法是什么？

更新:应该澄清一下.单击时会显示日期选择器,但单击日期不起作用.我收到错误:"此datepicker的未捕获的实例数据"

Answer 1

我相信你需要transclude:true在你的指令返回对象,它告诉angular预处理标记,例如{{ }}绑定.

您还需要将调用包装datepicker()在a中$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
}