多次調用AngularJS事件方法

我試圖創建一個用戶從一個文本區域輸入消息到另一個文本區域的歷史記錄。但是，只要在第一個文本區域輸入一個字符，就會多次將其複製到第二個文本區域。看起來好像我的事件以及Angular Controller方法被多次調用。多次調用AngularJS事件方法

有人可以請看看這的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>

來源

2015-05-11 Sandeep

這是因爲，每次消化循環運行過程中，左（）和leftHistory（）被調用。您應該在ng-change上調用這些方法，並通過變量顯示字符。 –

豈不是$scope.messageHistory = $scope.message;而不是+=，你一次又一次追加整個訊息？

或簡單地使用相同的模型？

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

來源

2015-05-11 09:12:54

的問題是（控制檯）：

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

爲什麼？：

首先按下鍵盤上的a變化對$scope的message變量後消化週期。
摘要循環更進一步，並檢查是否有任何觀察者（即{{ }}）發生了變化。 - >調用左（）& leftHistroy（）
的leftHistory函數改變$scope.messageHistory
摘要週期更進一步並看到messageHistory已經改變 - >調用觀察家
無限循環 - 出口10個循環

後

來源

2015-05-11 09:15:10 Xeon

嗨，你有下面的錯誤

變化lefsthistory代碼這個

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

你正在嘗試$ scope.messageHistory + = $ scope.message; 改爲放置$ scope.messageHistory = $ scope.message;

看這個的jsfiddle JSFiddle

來源

2015-05-11 09:40:47

多次調用AngularJS事件方法

回答

相關問題