我将 datepicker 指定为 angularJS 指令，这会给出未捕获的异常:缺少此 datepicker 的实例数据。但当我在外面使用时工作正常。这是我的代码。与 JSFiddle 相同。
我仅使用非常简单的日期选择器选项。排序后日期选择器不起作用。因此我正在寻找一些解决方法。这个问题是 this 的替代方法问题。
var dimeapp = angular.module('dime', [])
.controller('storeSrcWHController', function($scope, $http) {
$scope.sortType = 'providerName'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.dateChange = function(index, row) {
console.log(row.startDateH);
}
$scope.tableData = [{
"startDateH": "2011-06-11",
"startDate": "11/06/2011"
}, {
"startDateH": "2011-03-12",
"startDate": "12/03/2011"
}, {
"startDateH": "2011-07-13",
"startDate": "13/07/2011",
}];
})
.directive("datepicker", function () {
return {
restrict: "A",
link: function (scope, el, attr) {
el.datepicker({
dateFormat: 'dd/mm/yy'
});
}
};
});<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<body ng-app="dime" ng-controller="storeSrcWHController">
<div class="col-sm-3 text-right">Global Date:</div>
<div class="col-sm-7"><input type="text" id='globalDate' datepicker class='width-100-per' ng-model="globalDate" data-toggle="tooltip" data-placement="bottom" placeholder="Search by a Store ID"></div>
<table ng-table="defaultWHTable" id="border-table" class="table table-hover">
<thead>
<tr>
<th class="text-center" style="position: relative; width: 216px;">
<div>
Start Date Hidded<span class="mandatory">*</span>
</div>
</th>
<th class="text-center" style="position: relative; width: 216px;">
<div ng-click="sortType = 'startDateH'; sortReverse = !sortReverse">
Start Date<span class="mandatory">*</span>
<span class="glyphicon sort-icon" ng-show="sortType=='startDateH'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
</div>
</th>
</thead>
<tbody ng-cloak>
<tr ng-repeat="row in tableData | orderBy:sortType:sortReverse " on-finish-render="invokDatePicker">
<td align="center" style="width: 229px;">{{row.startDateH | date:'d-MM-yyyy' }}</td>
<td align="center" style="width: 229px;">
<input type="text" class="datepicker" datepicker ng-change="dateChange($index, row)" id="sartDate-{{$index}}" ng-model="row.startDate" readonly="readonly" style="cursor: default">
</td>
</tr>
</tbody>
</table>
</body>最佳答案
我删除了 id 属性，然后它就按我的预期正常工作了。
<input type="text" class="datepicker" datepicker ng-change="dateChange($index, row)" ng-model="row.startDate" readonly="readonly" style="cursor: default">
工作一:
var dimeapp = angular.module('dime', [])
.controller('storeSrcWHController', function($scope, $http) {
$scope.sortType = 'providerName'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.dateChange = function(index, row) {
console.log(row.startDateH);
}
$scope.tableData = [{
"startDateH": "2011-06-11",
"startDate": "11/06/2011"
}, {
"startDateH": "2011-03-12",
"startDate": "12/03/2011"
}, {
"startDateH": "2011-07-13",
"startDate": "13/07/2011",
}];
})
.directive("datepicker", function () {
return {
restrict: "A",
link: function (scope, el, attr) {
el.datepicker({
dateFormat: 'dd/mm/yy'
});
}
};
});<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<body ng-app="dime" ng-controller="storeSrcWHController">
<div class="col-sm-3 text-right">Global Date:</div>
<div class="col-sm-7"><input type="text" id='globalDate' datepicker class='width-100-per' ng-model="globalDate" data-toggle="tooltip" data-placement="bottom" placeholder="Search by a Store ID"></div>
<table ng-table="defaultWHTable" id="border-table" class="table table-hover">
<thead>
<tr>
<th class="text-center" style="position: relative; width: 216px;">
<div>
Start Date Hidded<span class="mandatory">*</span>
</div>
</th>
<th class="text-center" style="position: relative; width: 216px;">
<div ng-click="sortType = 'startDateH'; sortReverse = !sortReverse">
Start Date<span class="mandatory">*</span>
<span class="glyphicon sort-icon" ng-show="sortType=='startDateH'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
</div>
</th>
</thead>
<tbody ng-cloak>
<tr ng-repeat="row in tableData | orderBy:sortType:sortReverse " on-finish-render="invokDatePicker">
<td align="center" style="width: 229px;">{{row.startDateH | date:'d-MM-yyyy' }}</td>
<td align="center" style="width: 229px;">
<input type="text" class="datepicker" datepicker ng-change="dateChange($index, row)" ng-model="row.startDate" readonly="readonly" style="cursor: default">
</td>
</tr>
</tbody>
</table>
</body>关于javascript - 表中的 ng-repeat datepickers 提示 'missing instance data' 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35886226/