AngularJS event method called multiple times

Question

I am trying to create a history of user typed messages from one text area into the other text area. But as soon as a character is typed in first text area, it gets copied into second text area multiple times. Looks as if my event and hence the Angular Controller method is being invoked multiple times.

Can somebody pls have a look at this jsfiddle http://jsfiddle.net/w4g417bt/

Code:

<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    <div data-ng-app='myNoteTakingApp1'
        data-ng-controller="myNoteTakingController1">
        <div style="float: left">

            <textarea rows="10" cols="40" data-ng-model="message"></textarea>
            <br> Characters Left: {{ left() }}

        </div>

        <div style="margin-left: 25em">
            <textarea rows="10" cols="40" data-ng-model="messageHistory"
                data-ng-disabled='true'></textarea>
            <br> Characters Left: {{ leftHistory() }}
        </div>

        <div style="margin-left: 21em">
            <button data-ng-click="clear();">Clear</Button>
        </div>
    </div>

    <script>
        var app = angular.module('myNoteTakingApp1', []);

        app.controller('myNoteTakingController1', function($scope) {
            $scope.message = "";
            $scope.messageHistory = "";
            $scope.left = function() {
                return 100 - $scope.message.length;
            }
            $scope.leftHistory = function() {
                $scope.messageHistory += $scope.message;
                return 500 - $scope.messageHistory.length;
            }
            $scope.clear = function() {
                $scope.message = "";
            }
        });
    </script>

This is because, everytime digest loop is running, left() and leftHistory() is being called. You should call those method on ng-change, and show the character left via a variable. — Ataur Rahim Chowdhury
– Ataur Rahim Chowdhury, Commented May 11, 2015 at 9:17

A.B · Accepted Answer · 2015-05-11 09:12:54Z

3

should it not be $scope.messageHistory = $scope.message; instead of += as you are appending whole message again and again?

or simply use same model for both?

$scope.leftHistory = function() {
                $scope.messageHistory = $scope.message;
                return 500 - $scope.messageHistory.length;
            }

answered May 11, 2015 at 9:12

A.B

20.5k3 gold badges43 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prajapati Vikas · Accepted Answer · 2015-05-11 09:40:47Z

1

Hi you had below mistakes

Change lefsthistory code to this

    $scope.leftHistory = function() {
        $scope.messageHistory = $scope.message;
        return 500 - $scope.messageHistory.length;
   }

You were trying $scope.messageHistory += $scope.message; instead put $scope.messageHistory = $scope.message;

look on this jsfiddle JSFiddle

answered May 11, 2015 at 9:40

Prajapati Vikas

3001 silver badge12 bronze badges

Comments

Xeon · Accepted Answer · 2015-05-11 09:15:10Z

0

The problem is (in console):

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Why?:

The first digest cycle after pressing the a on keyboard changes the message variable on the $scope.
The digest cycle goes further and checks if any of the watchers (i.e. {{ }}) are changed. -> Invokes left() & leftHistroy()
The leftHistory function changes $scope.messageHistory
The digest cycle goes further and sees that messageHistory has changed -> invoke watchers
Endless loop - exit after 10 cycles

answered May 11, 2015 at 9:15

Xeon

6,0195 gold badges34 silver badges52 bronze badges

Collectives™ on Stack Overflow

AngularJS event method called multiple times

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related