Метод события 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; 
      } 

Answer 2

Проблема заключается в том (в консоли):

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

Почему ?:

1. Первый переваривать цикл после нажатия a на клавиатуре изменяет message переменную на $scope.
2. Цикл дайджест идет дальше и проверяет, не изменен ли какой-либо из наблюдателей (т. Е. {{ }}). -> Запускает влево() & leftHistroy()
3. leftHistory функция изменяет $scope.messageHistory
4. Цикл дайджеста идет дальше и видит, что messageHistory изменилось -> вызвать Бодрствующих
5. бесконечный цикл - выход после 10 циклов

Answer 3

Привет у вас была ниже ошибки

Изменить код lefsthistory к этому

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

Вы пытались $ scope.messageHistory + = $ scope.message; вместо этого put $ scope.messageHistory = $ scope.message;

взгляд на эту jsfiddle JSFiddle