Why do i have to call $scope.$digest() here?

Question

I created a directive for showing tooltips:

app.directive('tooltip',function(){
    return{
        restrict: 'A',
        link: function(scope,element,attr){
            element.bind('mouseenter',function(e){

                scope.setStyle(e);

            });
        }
    }
});

The corresponding setStyle() function:

$scope.setStyle = function(e){
    $scope.style = {
        position: 'absolute',
        // some other styles
    };

    $scope.$digest();
};

$scope.style is applied to this:

<span ng-style="style">I am a tooltip</span>

which is part of my view, handled by the controller who owns $scope.style

Why do i have to call $digest() in order to apply the changes to $scope.style, which was declared and initialized earlier?

Answer 1

Because the callback attached to the mouseenter event is outside of angular's scope; angular has no idea when that function runs/ends so the digest cycle is never ran.

Calling $digest or $apply tells angular to update bindings and fire any watches.

Answer 2

element.bind() means listen for specific browser event and execute callback when this event is dispatched on element. Nowhere in this chain of events Angular is included - it does not know that the event happened. Therefore you must tell it about the event explicitly. However, in most cases you should use $scope.$apply() not $scope.$digest(), especially when you're not sure about it.

Here is more appropriate code for your situation:

app.directive('tooltip',function(){
    return{
        restrict: 'A',
        link: function(scope,element,attr){
            element.bind('mouseenter',function(e){
                scope.setStyle(e);
                scope.$apply();
            });
        }
    }
});

and setStyle():

$scope.setStyle = function(e){
    $scope.style = {
        position: 'absolute',
        // some other styles
    };
};