帶有ng-repeat的表中的最小和最大日期jquery datepicker

Question

在我的頁面中，我具有添加，編輯和刪除操作的表。 表中的一列是“審核日期”。 日期的限制是日期值可以是填寫表單之前的10分鍾到前一天的任何時間。

當我在表外添加最小和最大日期限制時，它可以正常工作，但是當我在表中添加分鍾時，它不起作用

Date Outside Table (Works Perfectly)
<input type="text" datepicker="" ng-model="auditDate" id="AddAudit" /> 

$("#AddAudit").datepicker({
    maxDate: '-1',
    minDate: '-10M'
});


Date in Table  (does not work :-( )
<table ng-repeat="i in list">
    <tr>
        <td>
            <input type="text" datepicker="" ng-model="i.startDate" ng-change="dateChanged(i)" id="EditAuditDate_{{i.id}}" />
        </td>
    </tr>    
</table>

$scope.dateChanged = function(item) {
var inpAuditDate = "#EditAuditDate_" + item.id;
    $(inpAuditDate).datepicker({
        maxDate: '-1',
        minDate: '-10M'
    });
};

我創建了一個示例來顯示問題

任何幫助將不勝感激

Answer 1

您可以將最小/最大選項移動到指令代碼中，而不是從多個位置加載datepicker插件。 您最終要清理控制器，並在指令中保留選擇邏輯：

var app = angular.module('app', []);
app.controller('TestController', function ($scope, $window) {
    $scope.list = [{
            id: 1
        },
        {
            id: 2
        },
        {
            id: 3
        }];
});

app.directive('datepicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, el, attr, ngModel) {
      $(el).datepicker({
        maxDate: '-1',
        minDate: '-10M',
        onSelect: function(dateText) {
          scope.$apply(function() {
            ngModel.$setViewValue(dateText);
          });
        }
      });
    }
  };
});

工作樣本 。