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>，其类为.date_picker，因此你的jQuery选择器$(".date_picker")将返回越来越多的匹配ng-repeat 1}}成长。您真的只希望您的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'，但我看不到<otForm＆gt;在ng-repeat。

中

jQuery datepicker在angularjs中的ng-repeat里面没有工作？

1 个答案: