$rootScope.$digest overwhelming calls

[FarSeeing]

We have a problem of numerous $rootScope.$digest calls that results of calling all watchers of all scopes. This happens because we have several instances of color picker on the same page, each one of them adding an event handler for all clicks on the whole document:

$document.on('click', function (evt) {
    if ($scope.find(evt.target).length === 0) {
        $scope.log('Color Picker: Document Hide Event');
        $scope.hide();
    }
});
$scope.hide = function (apply) {
    $scope.log('Color Picker: Hide Event');
    $scope.visible = false;

    if (apply !== false) {
        $scope.$apply();
    }
};

What I see that could be improved:

• check if $scope.visible is true and exit early otherwise,
• rewrite $scope.contains to use native contains method. Check for performance test
• get rid of calling $scope.$apply()?
• handle $destroy event to remove click event listeners,
• store references to all instances and call event handler only once?

Thank you.

[ruhley]

Hi @FarSeeing,

Thanks for looking through the code and finding some improvements. I have implemented some of your suggestions in commit c0a488f0ab8d18afea653f24e371c2d14bbad2ad and released in v0.6.8. I did a slightly premature release to get some other bug fixes in for other people and I am currently pressed for time.

• check if $scope.visible is true and exit early otherwise, DONE
• rewrite $scope.contains to use native contains method. Check for performance test DONE
• get rid of calling $scope.$apply()? If $scope.$apply() is removed then the element is not hidden properly. Do you know a way around this?
• handle $destroy event to remove click event listeners, DONE
• store references to all instances and call event handler only once? NOT DONE

The improvements I have made should drastically reduce the number of $digest calls. Hopefully this will fix your problems. If so, can you close the ticket, otherwise I will implement them when I get the time.

[FarSeeing]

Thanks for your reply. You are right about $scope.$apply - I missed that click event listener is fired from non-Angular environment. So there's no other way but to call $scope.$apply. I guess this issue is solved unless some new ideas arise. Thank you.