Question

我通过$scope.items为ng-repeat中的每个项目显示一个表格行调用ng-repeat可防止出现jquery-UI datepicker弹出窗口。虽然如果我删除ng-repeat，它可以工作，但我只能获得一行。

这是为什么？我如何才能使它对于我的items数组中的每个项目，表中有一行带有工作日期选择器。我想在ng-repeat之前调用datepicker()函数？

我的html看起来像这样

<div class="content" ng-controller="tableCtrl">
    <div mydirective>

    </div>
</div>

控制器

 app.controller("tableCtrl", function ($scope)
    {
        $scope.items = [
            "test1", "test2","test3"
        ];
    });

最后我的指示'mydirective'看起来像这样

app.directive("mydirective", function ()
    {
        return {
            templateUrl: "tables.html"
        }
    });

tables.html

 <table>
    <tr ng-repeat="item in items">
        <td>
            <input type="text" class="datepicker" />
        </td>
        <td>
            <input type="text" class="datepicker" />
        </td>
        <td>
            <input type="text" class="datepicker" />
        </td>
        <td>
            <select>
                <option>test</option>
                <option>test</option>
            </select>
        </td>
    </tr>
</table>
      <script>
        $(".datepicker").datepicker();
        </script>

Answer 1

您需要创建一个自定义的datepicker指令，该指令针对每个重复的元素运行。例如（未经测试）：

angular.module('my.directives.datepicker', [])
.directive('myDatePicker', ['$timeout', function($timeout){
    return {
        restrict: 'A',      
        link: function(scope, elem, attrs){
            // timeout internals are called once directive rendering is complete
            $timeout(function(){                    
                $(elem).datePicker();
            });
        }
    };
}]);

无法使用date -icker来处理ng-repeat

1 个答案: