AngularJS指令中的jQuery-ui datepicker

Question

I have table with input fields with dates. I need to change them by datepicker. With jquery-ui it works fine but I need to do this on angularjs.This is what I have right now, but it's not working for me. Controller:

.controller('TimesheetCtrl', ['$scope', 'restService',
     function($scope,  restService) {
         $scope.bindModel = function(data) {
             $scope.model = data;
         };
     restService.getTicketsInProgressList($scope.bindModel);
     }
]);

Directive:

.directive('datepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            $(function () {
                element.datepicker({
                    dateFormat: 'dd/mm/yy',
                    onSelect: function (date) {
                        scope.$apply(function () {
                            ngModelCtrl.$setViewValue(date);
                        });
                    }
                });
            });
        }
    };
});

HTML:

<tbody ng-repeat="item in model | orderBy: '-TaskDate'">
    <tr class="timesheet-day-block">
        <td colspan="5"> <span class="timesheet-date">{{item.TaskDate | date: MM/dd/yyyy}}</span>

        </td>
    </tr>
    <tr class="timesheet-table-rows" ng-repeat="list in item.TimesheetList">
        <td>{{list.ProjectName}}</td>
        <td>
            <!-- HERE IS THE PROBLEM -->
            <input type="text" placeholder="dd/mm/yyyy" ng-model="list.TaskDate | date: 'dd/MM/yyyy'" datepicker/>
        </td>
        <td> <a ng-href="#/tickets/ticket/{{ticket.Id}}">{{list.Task}}</a>

        </td>
        <td>
            <input type="text" value="{{list.TimeWorked}}" placeholder="Elapsed time" style="width: 98%" />
        </td>
        <td>
            <input type="text" value="{{list.Note}}" placeholder="Note" style="width: 98%" />
        </td>
    </tr>
</tbody>

Answer 1

You can check with the below link.

Fiddle

    app = angular.module 'myapp', ['ng-bootstrap-datepicker']

AppCtrl = ($scope)->
  $scope.datepickerOptions =
    format: 'yyyy-mm-dd'
    language: 'fr'
    autoclose: true
    weekStart: 0

  $scope.date = '2000-03-12'

app.controller 'AppCtrl', AppCtrl    
angular.bootstrap document, ['myapp']

Answer 2

Inject $timeout in your directive and use it like this.

.directive('datepicker', function ($timeout) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            $timeout(function () {
                $(function () {
                    element.datepicker({
                        dateFormat: 'dd/mm/yy',
                        onSelect: function (date) {
                            scope.$apply(function () {
                                ngModelCtrl.$setViewValue(date);
                            });
                        }
                    });
                });
            });
        };
    }
});