Ng-click makes my app lag?


#1

Hi, Learning making mobile app, I meet lag when fast clicking on a ng-click button, my app does not need so mutch, only one concatenation… and dipslay result dynamically.

Here is my html code:

<ion-header-bar class="bar-dark">
    <button class="button" ng-click="doSomething()">Left Button</button>
    <h1 class="title">NameKicker</h1>
    <button class="button">right Button</button>
</ion-header-bar>
<ion-content>
    <div class="padding-top" ng-controller="NamesController as namesCtrl">
        <div class="padding-top align-center">
            <h2 class="title">
                Enter your name
            </h2>
        </div>
        <form name="nameForm" class="list padding">
            <label class="item item-input">
                <input ng-change="kickReset()" ng-model="firstName" type="text" placeholder="First Name">
            </label>
            <label class="item item-input">
                <input ng-change="kickReset()" ng-model="lastName" type="text" placeholder="Last Name">
            </label>
        </form>
        <div class="card">
            <div class="item item-divider big-tittle">
                <span ng-hide="kicked">
                    {{ firstName }}
                    {{ lastName }}
                </span>
                <span ng-show="kicked">
                    {{ kickedName }}
                </span>
            </div>
        </div>
        <div class="button-middle">
            <input ng-click="kickName()" class="button button-dark button-block button-perso" type="button" value="{{!kicked ? 'Kick It' : 'Reset' }}">
        </div>
        <button ng-click="count = count + 1" ng-init="count=0">
            Increment
        </button>
<span>
  count: {{count}}
</span>
        {{ 'clicked: ' + kicknum }}
    </div>
</ion-content>

and my js:

(function (angular) {

    var app = angular.module('nameKicker', ['ionic'])

    .controller('NamesController', ['$scope', function($scope) {

        $scope.lastName = "";
        $scope.firstName = "";
        $scope.kickedName = '';
        $scope.kicked = false;
        $scope.kicknum = 0;

        $scope.kickName = function() {
            $scope.kicknum++;
            if ($scope.kicked === false && ($scope.lastName || $scope.firstName)) {
                $scope.kicked = true;
                $scope.kickedName = this.firstName + ' kick ' + this.lastName;
            }
            else
                $scope.kickReset();
        };

        $scope.kickReset = function() {
            $scope.kicked = false;
        }
    }])

If i click 10/15 times on reset/kick button, kicknum only goes to 8/10. Whereas count growes up normally.

Did I miss good practice ?

Thanks for answers.


#2

can you do a codepen?


#3

I tried first time i use it.

My codepen

No slow on codepen, but still when testing app on my device or on browser. maybe a way to include css…

I tried to use min.css /min.js but the same. what coul’d codepen do to run ir better ?


#4

thats a good question.

did you test it in the browser of your device?

what device are you using?


#5

I have the same issue.
Can’t share my code right now, but similarly I have a button which toggles a value (between true and false) on ng-click, and this value is used to display / hide a div with an ng-if test. Locally on a browser it works perfectly, on iOS the lag is at least 800ms… This is using the nightly build.


#6

I didn’t test in device’s browser, just installed app (ionic run android) on a Nexus 5.

Same slow in my computer’s browser using ripple. (ionic serve).


#7

Does anyone knows how to run such an app better ?