带有指令的AngularJS动态表单字段ID不起作用

小编典典

带有指令的AngularJS动态表单字段ID不起作用

angularjs

尝试将指令添加到具有动态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”。

有办法强迫这种情况发生吗？实施此方法的更好方法？

更新：应该已经澄清。单击日期选择器会显示出来，但是单击日期不起作用。我收到错误：“此日期选择器未捕获的缺少实例数据”

阅读 448

2020-07-04

共1个答案

小编典典

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

您还需要将调用包装到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
}

2020-07-04