Question

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

有人可以看看这个jsfiddle http://jsfiddle.net/w4g417bt/

代码：

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

Answer 1

不应该是$scope.messageHistory = $scope.message;而不是+=，因为您一次又一次地追加整个消息吗？

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

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

Answer 2

嗨，你犯了以下错误

将lefsthistory代码更改为此

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

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

看看这个jsfiddle JSFiddle

Answer 3

问题是（在控制台中）：

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

为什么：

按下键盘上的a后的第一个摘要周期会更改message上的$scope变量。
摘要周期更进一步，检查是否有任何观察者（即{{ }}）发生了变化。 - ＆GT;调用left（）＆amp; leftHistroy（）
leftHistory功能更改$scope.messageHistory
摘要周期更进一步，看到messageHistory已更改 - ＆gt;调用观察者
无限循环 - 10个循环后退出

多次调用AngularJS事件方法

3 个答案: