Apply already in progress error

Question

I currently use

scope.onFocus = function(){ // change scope variables 
};

elem.bind('focus', function(){
   scope.$apply('onFocus()')});

to bind to the focus event in the link function of a directive.

The problem is if I fire the focus event manually like this: elem.focus() in say ng-click handler , I will get "apply is in progress" error.

Is the workaround to check whether apply has been called : if (! scope.$$phase) ?

Is it considered "Angularic" to check before calling apply?

Any other elegant solution?

UPDATED:

Here's my solution:

Since scope.onFocus can trigger external events (outside of Angular) which in turn can call $apply, you would have 'apply already in progress' error. The trick is to call $apply separately.

element.bind('focus', function(){
    scope.onFocus();
    scope.$apply(); // don't wrap onFocus call in $apply
})

Why would you do elem.focus() in ng-click? Why not onFocus()? — joakimbl

timactive timactive · Accepted Answer · 2013-05-05T14:20:57

You can use a directive to do this such as :

myapp.directive('onfocus', function() {
      return {
        restrict: 'A',
        scope: {
         onfocus:'=onfocus' 
            },
        link:function (scope, element, iAttrs, controller){
            element.bind('focus', function(event) {
                  scope.onfocus();
              });
        }

            };

    });

your view

<input type="text" onfocus="onFocus()" />

And your controller

scope.onFocus = function(){ // change scope variables 
};

Apply already in progress error

2 Answers