我正在使用带有angularJS的JQuery日期选择器。我在ng-repeat完成事件中设置日期选择器。但如果排序顺序发生了变化，那么我需要重新初始化日期选择器，但是ng-repeat完成事件没有触发。 HTML代码：
<table ng-table="defaultWHTable" id="border-table" class="table table-hover">
<thead>
<tr>
<th class="text-center" style="position: relative; width: 126px;">
<div ng-click="sortType = 'storeId'; sortReverse = !sortReverse">
Store ID
<span class="glyphicon sort-icon" ng-show="sortType=='storeId'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
</div>
</th>
<th class="text-center" style="position: relative; width: 136px;">
<div ng-click="sortType = 'storeName'; sortReverse = !sortReverse">
Store Name
<span class="glyphicon sort-icon" ng-show="sortType=='storeName'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
</div>
</th>
<th class="text-center" style="position: relative; width: 220px;">
<div ng-click="sortType = 'stockingPointId'; sortReverse = !sortReverse">
Store Default Warehouse<span class="mandatory">*</span>
<span class="glyphicon sort-icon" ng-show="sortType=='stockingPointId'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span>
</div>
</th>
<th class="text-center" style="position: relative; width: 216px;">
<div>
Start Date Hidded<span class="mandatory">*</span></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>
<th class="text-center" style="position: relative; width: 123px;">Delete</th>
<th class="text-center" style="position: relative; width: 123px;">Apply<br><label class="select-all"><input id="select-all" type="checkbox" ng-click="selectAll()" ng-disabled="disableBtn" autocomplete="off"> Select All</label></th>
<th class="text-center" >Add Row </th>
</tr>
</thead>
<tbody ng-cloak>
<tr ng-repeat="row in tableData | orderBy:sortType:sortReverse " on-finish-render="invokDatePicker">
<td id="itemid-{{$index}}" style ="width: 142px;">{{ row.storeId }}</td>
<td id="storeName-{{$index}}" style ="width: 150px;">{{ row.storeName }}</td>
<td style ="width: 225px;">
<select id="warehouse-{{$index}}" ng-change="valueChanged()" data-ng-model="row.stockingPointId" ng-options="wh.stockingPointId as wh.stockingPointName for wh in row.defaultWHList" style="width: 180px;"></select>
</td>
<td style="display:none"><input type="hidden" ng-model="row.rowId" value="{{row.rowId}}" ></td>
<td align="center" style ="width: 229px;">{{row.startDateH | date:'d-MM-yyyy' }}</td>
<td align="center" style ="width: 229px;"><input type="text" class="datepicker" ng-change="dateChange($index, row)" id="sartDate-{{$index}}" ng-model="row.startDate" readonly="readonly" style="cursor: default"></td>
<td style="display:none"><input type="hidden" ng-model="row.hiddenStartDate" value="{{row.hiddenStartDate}}" ></td>
<td align="center" style ="width: 140px;"><input id="delete-{{$index}}" type="checkbox" ng-model="row.delete" ng-click="deleteRow($index, row)"/></td>
<td align="center" style ="width: 140px;"><input id="apply-{{$index}}" type="checkbox" ng-model="row.apply" ng-click="addorremove($index, row)"/></td>
<td align="center" style ="width: 140px;"><input type="image" id="myimage" class="add_btn" src="${pageContext.request.contextPath}/resources/images/add_btn.jpg" style="width: 22px;" ng-click="addNewRow($index, row)"/></td>
</tr>
</tbody>
</table>
JS档案：
$scope.search = function () {
$scope.Stores = [{"storeId":"S2000","storeName":"Minneapolis Store","defaultWHList":[{"stockingPointName":"N American Import WH","stockingPointNo":"W1000","stockingPointId":1},{"stockingPointName":"Store Supply","stockingPointNo":"W10001","stockingPointId":2},{"stockingPointName":"Investment Buy","stockingPointNo":"W10002","stockingPointId":3},{"stockingPointName":"Direct","stockingPointNo":"W10003","stockingPointId":4},{"stockingPointName":"testChamber","stockingPointNo":"00101","stockingPointId":21}],"defaultWH":"21","startDateH":"2011-06-11", "startDate":"11-06-2011","hiddenStartDate":"26/02/2016","endDate":null,"operation":null,"rowId":"AAAn+qAANAAALyvAAX","stockingPointId":21,"storeNo":57,"updatedBy":null,"timeStamp":null},{"storeId":"S2000","storeName":"Minneapolis Store","defaultWHList":[{"stockingPointName":"N American Import WH","stockingPointNo":"W1000","stockingPointId":1},{"stockingPointName":"Store Supply","stockingPointNo":"W10001","stockingPointId":2},{"stockingPointName":"Investment Buy","stockingPointNo":"W10002","stockingPointId":3},{"stockingPointName":"Direct","stockingPointNo":"W10003","stockingPointId":4},{"stockingPointName":"testChamber","stockingPointNo":"00101","stockingPointId":21}],"defaultWH":"1","startDateH":"2011-03-12","startDate":"12-03-2011","hiddenStartDate":"30/03/2016","endDate":null,"operation":null,"rowId":"AAAn+qAANAAALyvAAG","stockingPointId":1,"storeNo":57,"updatedBy":null,"timeStamp":null},{"storeId":"S6000","storeName":"Oceania Outlet","defaultWHList":[{"stockingPointName":"N American Import WH","stockingPointNo":"W1000","stockingPointId":1},{"stockingPointName":"Store Supply","stockingPointNo":"W10001","stockingPointId":2},{"stockingPointName":"Investment Buy","stockingPointNo":"W10002","stockingPointId":3},{"stockingPointName":"Direct","stockingPointNo":"W10003","stockingPointId":4},{"stockingPointName":"testChamber","stockingPointNo":"00101","stockingPointId":21}],"defaultWH":"3","startDateH":"2011-07-13","startDate":"13-07-2011","hiddenStartDate":"28/04/2016","endDate":null,"operation":null,"rowId":"AAAn+qAANAAALyvAAa","stockingPointId":3,"storeNo":58,"updatedBy":null,"timeStamp":null}];
$scope.tableData = $scope.Stores;
$scope.disableBtn = false;
}
$scope.$on('invokDatePicker', function(ngRepeatFinishedEvent) {
for(i=0; i < $scope.tableData.length; i++ ){
$("#sartDate-"+i).datepicker("destroy");
$( "#sartDate-"+i ).datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onClose: function (dateText, inst) {
function isDonePressed() {
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
$('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
}
},
minDate: 0
});
}
});
指令代码：
myapp.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
});
排序后日期选择器无法正常工作。load。没有排序它工作正常。 我怎样才能打电话给onFinishRender。
答案 0 :(得分：1)
您要做的事情无效。
指令 onFinishRender 在绑定到元素时触发，而不是在它真正完成排序时触发。
但这并不是它不起作用的原因。它无效，因为您使用的是$emit而不是$broadcast。
查看this链接，更清楚地了解差异。
重播评论可能会尝试对数组进行排序，然后再将其传递给dom
angular.module('app').controller('myController',function($filter){
var arr = [] // huge array
$scope.sort = function(sortType){
scope.data = $filter('orderBy')(arr , sortType, true);
}
$scope.sort('default');
})
现在，正如我在您的小提琴代码中看到的，您可以使用标题上的ng-click将sort函数称为角度表达式
答案 1 :(得分：0)
有点方面，模式不会比你的指令更糟糕
myapp.run(['$scope','$timeout', function($scope,$timeout) {
$timeout(function () {
$scope.$broadcast("domIsReady");
});
}]);
亲自尝试一下，我想听听您的意见
答案 2 :(得分：0)
我使用AngularJS指令解决了这个问题。 日期选择器TD如下：
<td align="center" style ="width: 229px;"><input type="text" class="datepicker" ng-change="dateChange($index, row)" datepicker ng-model="row.startDate" readonly="readonly" style="cursor: default"></td>
指令代码：
.directive("datepicker", function () {
return {
restrict: "A",
link: function (scope, el, attr) {
el.datepicker({
dateFormat: 'dd/mm/yy'
});
}
};
})