safe $apply implementation

[siongui]

Hello,

I am writing custom event directive for keydown, blur, and focus. One problem the I often have is the following error:
Error: $apply already in progress

I am wondering whether the AngularJS team can add a "safe" apply function in Scope. Probably like the following implementation

$scope.safeApply = function(fn) {
  var phase = this.$root.$$phase;
  if(phase == '$apply' || phase == '$digest')
    this.$eval(fn);
  else
    this.$apply(fn);
};

Do you think is it better to provide this in AngularJS?

[petebacondarwin]

This has been discussed a lot. You are responsible for knowing whether you
are inside an AngularJS apply block or not. If you are handling a pure JS
event then you are not. If you are reacting to something triggered by a
directive or service (i.e. ng-click or $http.get) then you are. There are
a very small number of cases where 3rd party libraries call asynch or
synch. In such cases the recommended strategy is to force asynch using
$timeout.
Pete

On 16 February 2013 21:15, Siong-Ui Te notifications@github.com wrote:

Hello,

I am writing custom event directive for keydown, blur, and focus. One
problem the I often have is the following error:
Error: $apply already in progress

I am wondering whether the AngularJS team can add a "safe" apply function
in Scope. Probably like the following implementation

$scope.safeApply = function(fn) {
var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest')
this.$eval(fn);
else
this.$apply(fn);};

Do you think is it better to provide this in AngularJS?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2023.

[petebacondarwin]

I am going to close for now. If you have further questions about this then please post to the mailing list where you can get more help.

[pkozlowski-opensource]

@siongui support for keydown is in master (e03182f), was released as part of 1.1.2 (https://github.com/angular/angular.js/blob/master/CHANGELOG.md#112-tofu-animation-2013-01-22) so this one is covered.

[siongui]

Thanks for the tips,
I am doing a auto-suggestion feature for input element, and I add a small draggable keypad for users to type without keypress. Users can input by pressing keys on their keyboard or by mouse clicking the keypad on the screen. I need to do something if onblur or on focus event of the input element happens. I called $apply in my onblur and onfocus directives to keep data-binding on the fly.

The dilemma is, however, that when users click on the keypad, the onblur event hanlder is called. At the end of the handler, element.focus() is called to keep input element focused, which in turn triggers onfocus event handler. Because these two event happens too close, and both call $apply, so I get the "$apply already in progress" error.

It is very tedious to check $$phase every time I called $apply in my code. So I am wondering whether it is possible to provide a "safe" $apply to do this automatically?

[siongui]

see following link for furthur discussion:
https://groups.google.com/forum/?fromgroups=#!topic/angular/iXnA80JOZUg

[akarelas]

This code, copied & pasted exactly as below, will allow you to call: $scope.safeApply(function(){...}); from wherever. I think.

angular.module('ng').run(function($rootScope) {
    $rootScope.safeApply = function(fn) {
        var phase = this.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            if(fn && (typeof(fn) === 'function')) {
                fn();
            }
        } else {
            this.$apply(fn);
        }
    };
});

It's based on the first comment of this blog post

[MattPLavoie]

@petebacondarwin oh man, $timeout, of course. Is this documented anywhere or is there an example somewhere?

[petebacondarwin]

@siongui - Sorry my last comment (now deleted) was rubbish! This would still run the element.focus() inside an apply block thus causing the onFocus handler to do the same. What we should be doing is using the $timeout around the onFocus handler... (or actually maybe $evalAsync...)

angular.module(...).directive('onFocus', ['$timeout', function($timeout) {
  return function postLink(scope, element, attrs) {
    element.focus(function(event) {
      scope.$evalAsync(attrs.onFocus);
    });
  };
}]);

Something like that anyway.