I customized the angularjs UI datepicker. In my controller I load events
from a database. Based on the events the days of the datepicker are shown
in green, if still new events are possible at a certain day and red if not.
In my controller I do
function getEvents() {
var result = [];
var start = date.getFullYear() + '-' + (date.getMonth() + 1) +
'-01';
var end = date.getFullYear() + '-' + (date.getMonth() + 1) + '-'
+ months[date.getMonth()].days;
$http.get('http://localhost:8080/getEvents?CalId='+$scope.CalId+'&start='+start+'&end='+end).
success(function(data) {
$scope.events = data;
result = data;
//var elem = angular.element(document.querySelector('table'));
//elem.scope().$apply();
}).
error(function(err) {
return [];
});
return result;
}
The getEvents method is called when the controller is created.
The customized datepicker code is
$templateCache.put("template/datepicker/day.html",
'<table id="eventPicker" role="grid"
aria-labelledby="{{uniqueId}}-title"
aria-activedescendant="{{activeDateId}}">\
<thead>\
<tr>\
<th><button type="button" class="btn btn-default btn-sm
pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon
glyphicon-chevron-left"></i></button></th>\
<th colspan="{{5 + showWeeks}}"><button
id="{{uniqueId}}-title" role="heading" aria-live="assertive"
aria-atomic="true" type="button" class="btn btn-default btn-sm"
ng-click="toggleMode()" tabindex="-1"
style="width:100%;"><strong>{{title}}</strong></button></th>\
<th><button type="button" class="btn btn-default btn-sm
pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon
glyphicon-chevron-right"></i></button></th>\
</tr>\
<tr>\
<th ng-show="showWeeks" class="text-center"></th>\
<th ng-repeat="label in labels track by $index"
class="text-center"><small
aria-label="{{label.full}}">{{label.abbr}}</small></th>\
</tr>\
</thead>\
<tbody>\
<tr ng-repeat="row in rows track by $index">\
<td ng-show="showWeeks" class="text-center h6"><em>{{
weekNumbers[$index] }}</em></td>\
<td ng-repeat="dt in row track by dt.date"
ng-init="busy=$parent.$parent.$parent.$parent.$parent.$parent.available(dt.date)"
class="text-center" role="gridcell" id="{{dt.uid}}"
aria-disabled="{{!!dt.disabled}}">\
<button type="button" style="width:100%;"
class="btn btn-default btn-sm" ng-class="{\'btn-info\': dt.selected,
active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled"
tabindex="-1"><span ng-class="{\'text-muted\': dt.secondary, \'text-info\':
dt.current, \'available\': busy.available, \'notAvailable\':
busy.notAvailable}">{{dt.label}}</span></button>\
</td>\
</tr>\
</tbody>\
</table>');
The $parent.$parent.$parent.$parent.$parent.$parent.available(dt.date) uses
$scope.events to determine if events are still possible for a day or not.
If I step through it in the debugger everything works fine. But without
debugger sometimes it works and sometimes it does not work depending on
when the .success method is called. The success method of the $http service
is automatically wrapped with $scope.$apply by angular internally.
But in this case it seems that the bindings are not updated.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
