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 >。