AngularJS set synchronous call of function from directive

Question

I have this directive :

app.directive('changemonth', function($animator) {
    return {
      link : function($scope, element, attrs) {
        element.bind("click", function() {

          if(element.attr('class').search('disabled') == -1) {

            // récupération du calendrier :
            if(element.attr('class').search('day') != -1)
              var calendar = angular.element(element.parent().parent());
            else                                         
              var calendar = angular.element(element.parent().parent().next().children()[1]);
            var animator = $animator($scope, attrs);

            animator.hide(calendar); 
            setTimeout(function() { 
              $scope.$apply(attrs.changemonth);
              animator.show(calendar); 
            }, 500);
          }
        });
      }
    };
});

With attrs.changemonth, i call a function (wich can change), for exemple this one :

$scope.next = function() {
        var tmpMonth = $scope.monthsLabels.indexOf($scope.monthDisplayed) + 1;
        var tmpYear = $scope.yearDisplayed;
        if(tmpMonth==12) {
            tmpMonth = 0;
            tmpYear = parseInt($scope.yearDisplayed) + 1;
        }
        getCalendar(tmpMonth, tmpYear);
        $scope.monthDisplayed = $scope.monthsLabels[tmpMonth];
        $scope.yearDisplayed = tmpYear.toString();
    };

And so this function call another getCalendar() you can see here :

function getCalendar(month, year) {
        $http({
            method : "GET", 
            url : 'http://my_url/getCalendar', 
            params : { 
                group_id : $scope.group_id,
                month : month,
                year : year
            }
        })
        .success(function(data) {
            $scope.calendar = data;
        });
    }

getCalendar() use $http to get the calendar from database.

My problem is that i would like to wait for the response of $http before using animator in directive, like this, my calendar will only be displayed if the content is loaded.

I heard of $q and promises. But I don't see how to use it in this very particular context.

It would be awesome if somebody here have an idea.

Zack Argyle · Accepted Answer · 2013-08-02 15:35:34Z

4

Try broadcasting from your success callback like this.

.success(function(data) {
    $scope.calendar = data;
    $rootScope.$broadcast('event:calendar-received');
});

Then in your directive you can wait to receive that signal like this.

$scope.$on('event:calendar-received', function() {
    ... do your stuff with animator...
});

answered Aug 2, 2013 at 15:35

Zack Argyle

8,4674 gold badges32 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KmeCnin Over a year ago

Thanks alot, it works parfectly and i needed just a very little changing.

KmeCnin Over a year ago

I just have one problem now. As I have multiple calls of $scope.$on('event:calendar-received', function() {}, I can't make the differences between my differents calls. So the event launch sometimes with the parameters of the last $broadcast not the earliest. How could i make all $broadcast indepedent from each other ? thanks again for help.

KmeCnin Over a year ago

OK, i just added some unique token to the $broadcast string and it works perfectly.

tnunamak · Accepted Answer · 2013-08-02 13:47:51Z

0

$http(...) evaluates to a promise. That means that given

var x = $http(...)

You can do

x.then(function success(){...}, function failure(){...});

and the success or failure function will only be called when the promise is resolved. See the promise API.

Your functions can return this x and their calling functions can interact with it as a promise.

answered Aug 2, 2013 at 13:47

tnunamak

2,0693 gold badges23 silver badges34 bronze badges

1 Comment

KmeCnin Over a year ago

Thanks for the help, i tried but it seems that something goes wrong. Technicaly your tip works but it doesn't works well with my other stuffs. Thanks again for the help.

Collectives™ on Stack Overflow

AngularJS set synchronous call of function from directive

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related