jQuery datepicker 不能在 angularjs 中的 ng-repeat 中工作？

Question

我在 angularjs 中使用 jquery ui 日期选择器，它工作正常。但是当 datepicker 进入 ng-repeat 循环时它不起作用。

<input type="text" class="form-control date_picker" ng-model="date.date" ng-repeat="date in ot.dates">
//Directive
app.directive('otForm', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'app/components/ots/form.html',
        link: function ($scope, form) {
            $(".date_picker").datepicker({
                dateFormat: 'dd-mm-yy',
                prevText: '<i class="fa fa-chevron-left"></i>',
                nextText: '<i class="fa fa-chevron-right"></i>',
                showButtonPanel: false,
                changeYear: true,
                changeMonth: true
            });
        }
    }
})

我该如何解决这个问题？

Answer 1

问题是您的 DOM 将有多个 <input>s 和 .date_picker 类，因此您的 jQuery 选择器 $(".date_picker") 将随着 ng-repeat 的增长返回越来越多的匹配项。您真的只是希望您的 jQuery 选择器与您的 ng-repeat 中的一个指令元素匹配。您很幸运，因为指令中的 link 函数将 scope 和 element 本身传递给您：

<input type="text" class="form-control date_picker" ng-model="date.date" ng-repeat="date in ot.dates">
//Directive
app.directive('otForm', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'app/components/ots/form.html',
        link: function (scope, element, attrs) {
            $(element).datepicker({
                dateFormat: 'dd-mm-yy',
                prevText: '<i class="fa fa-chevron-left"></i>',
                nextText: '<i class="fa fa-chevron-right"></i>',
                showButtonPanel: false,
                changeYear: true,
                changeMonth: true
            });
        }
    }
})

查看对link: 行和紧随其后的行的更改。我假设您的指令已正确实施，但此处未显示。你有restrict: 'E'，但我在你的ng-repeat 中没有看到<otForm>。