AngularJS事件方法多次调用

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.

我正在尝试从一个文本区域创建用户键入消息的历史记录到另一个文本区域。但是只要在第一个文本区域中键入字符,就会多次将其复制到第二个文本区域。看起来好像我的事件以及Angular Controller方法被多次调用。

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

有人可以看看这个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>

3 个解决方案

#1

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

应该不是$ scope.messageHistory = $ scope.message;而不是+ =,因为你一次又一次追加整个消息?

or simply use same model for both?

或者只是为两者使用相同的模型?

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

#2

Hi you had below mistakes

嗨,你有错误

Change lefsthistory code to this

将lefsthistory代码更改为此

    $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;

你正在尝试$ scope.messageHistory + = $ scope.message;而是把$ scope.messageHistory = $ scope.message;

look on this jsfiddle JSFiddle

看看这个jsfiddle JSFiddle

#3

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.

按下键盘上的a后的第一个摘要周期会更改$ scope上的消息变量。

The digest cycle goes further and checks if any of the watchers (i.e. {{ }}) are changed. -> Invokes left() & leftHistroy()

摘要周期更进一步,检查是否有任何观察者(即{{}})被改变。 - >调用left()和leftHistroy()

The leftHistory function changes $scope.messageHistory

leftHistory函数更改$ scope.messageHistory

The digest cycle goes further and sees that messageHistory has changed -> invoke watchers

摘要周期更进一步,看到messageHistory已经改变 - >调用观察者

Endless loop - exit after 10 cycles

无尽的循环 - 10个循环后退出

#1