Ng-clicks are slow

Sorry, if this is a duplicate question. I could not find the relevant information when I searched.

I see that when I have ng-clicks defined in my app, they are slow to respond. Specially on anchor tags. I can see the lag in navigating to the concerned view.

I had put alert() and it executes immediately but the angular code lags. Can anyone tell me why this might happen?

I haven’t experienced such thing, could you share some code?

the thing is that the application is huge. Lot of controllers in one controllers.js. It happens on android.

Is it that there are many watchers on $scope?

Sorry, I can’t share the code but it is happening. In my other app, it does not happen as it is small app. I am guessing lot of watchers.

You could try to use the Profiler in Chrome developer tools to find where your app spend most of time.

we had the same problem in a huge angularjs webapp. in complex views with many click-listeners like lists --> we added “global” click listeners instead of listeners for each item.

something like this:

ng-repeat="item in items" ng-click="globalClick($event)"

with $event you have access to the $ --> this should be the real clicked element --> so you can add additional data for the click-function via custom attributes or data-attributes to the dom-node.

<div ng-repeat="item in items" ng-click="globalClick($event)">
    <a data-item-id="{{item._id}}">{{}}</a>
$scope.globalClick = function ($event) {
    // $ or $event.originalTarget

good solution i like it !
could we make this reply as be a sticky reply?

A noob question: where is this globalClick defined? $rootScope or the controller?

If it is in controller, of that particular list, then I am already doing this. Or you mean to define it only once and use it for all the views and controller?

in the controller of the current context… because the functionality would differ i think.

Or you build up a powerful eventsystem --> a really global clickHandler, but i think this will be very hard to implement.

as per suggestion from @gmarziou I used the profiler and saw that firebase was taking time and there are many watchers in one view like 491. Trying to reduce the watchers.

Also, the ng-clicks are slow not only on ng-repeat but simple anchor tags also. So will figure something out and paste my observation here.

Thanks guys.

1 Like

Yeah but the clicks are generally slow if you have many of them because per default they are bubbling through the parent dom!

In many cases a click triggers new scope digest --> so every watcher is called again --> even the ng-repeat is rebuild again and so on. Try to use one-data-binding for values that does not change --> instead of {{myScopeKey}} use {{::myScopeKey}}.

Try to avoid own watchers and keep your dom as simple as possible.

1 Like

I could not find out except that when I click on a button/a, there is a noticeable delay in the button color change like touchstart happens first, it stops for some time, then touchend happens and at the end the function is fired.

This is a big problem for me and I am not able to find a solution for it. If this is going to happen more often I might have to move to native development as this is making my client complain.

In the mean time I am trying out on-tap and on-touch but getting mixed results.

I am now using on-touch instead of ng-click where there is no need for pull to refresh etc. and it is much faster than ng-clicks.

1 Like