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将具有.date_picker类的多个<input> ，因此，随着ng-repeat增加，您的jQuery选择器$(".date_picker")将返回越来越多的匹配项。 您真的只希望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:的更改link:行和紧随其后的行。 我假设您的指令已正确实施，但此处未显示。 您有restrict: 'E'但在您的ng-repeat <otForm不到<otForm >。