Ng-clicks are slow

ionic-v1
1

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?

2

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

3

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.

4

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

5

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 $event.target --> 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}}">{{item.name}}</a>
</div>
...
$scope.globalClick = function ($event) {
    // $event.target or $event.originalTarget
};
3 Likes
6

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

7

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?

8

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.

9

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
10

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
11

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.

12

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