1

I have a custom directive that creates a list of events, filtered by a custom filter 'DateRange' that checks events within a date range. The start date and end date used in the filter are scoped to the custom directive, while the events come from the parent scope.

Here is my custom directive

myApp.directive('eventList', function () {
return {
    restrict: 'A',
    replace: true,
    template: '<div data-ng-repeat="event in events | DateRange:start:end ">'+
                  '<div class="lead" data-ng-bind-html="event.Title"></div>'+
                  '<div class="lead" data-ng-bind-html="event.Description"></div>'+
                '</div>',
    scope: {
        start: '=',
        end: '=',
        events: '='
    }
}
});

Below is the markup:

            <div data-event-list="" 
                 data-events="events"
                 data-start="'2014-5-1 00:00:00'" 
                 data-end="'2014-5-1 23:59:59'">
            </div>

Below is the custom filter:

.filter('DateRange', function () {
   return function (events, startDate, endDate) {
    var results = [];
    // some logic
    return results;
   }
});

The events list is populated in the controller with an $http.get, and passed via $scope.events.

When I check in firebug I can see the custom filter never gets the "events" data whenever the data is retrieved with an $http call, which is asynchronous. The custom filter gets called as the $http service is trying to retrieve the data. I decided to try to implement a promise (most likely, incorrectly) but the call to get the data still happens after angular checks the custom filter, so the filter always gets an undefined events object.

Below is how the promise looks in the controller:

    $scope.events = [];

    $EventsSrv.getData().then(function (promise) {
        $scope.events = promise.data;
    });

I found a similar issue here, but when I implement it, the filter gets into a loop and gets aborted after reaching the 10 x limit.

I would appreciate any help in how to make this work.

UPDATE: I solved my issue. It was not the asynchronous call, but rather, the Date.parse() function in the filter, which was not parsing date in the following format: "2014-5-1 0:00:00". This is why when I originally posted the question I said it was working in Chrome but not FF or IE. I changed the format to "2014/5/1 0:00:00" and it's now working properly.

Community
  • 1
  • 1
Walcode
  • 11
  • 4

0 Answers0