javascript - 多次调用 AngularJS 事件方法

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