无法使日期选择器与ng-repeat一起工作

Question

我为$scope.items到ng-repeat中的每个项目显示一个表行调用ng-repeat可以防止jquery-UI日期拾取器弹出。虽然如果我删除ng-repeat，它的工作，但我只会得到一行。

为什么会这样?我如何才能使它，以便在我的项目数组中的每个项目，在表中有一行与工作日期选择器。我猜datepicker()函数在ng-repeat之前被调用?

我有一个像这样的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

您需要为每个重复的元素创建一个自定义的日期拾取器指令。如(未测试):

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();
            });
        }
    };
}]);