デバッグ後のAngularJS ng-watchイベントの発射

Question

私はtyping started and stoppedをユーザに示す必要があるという要件があります。

だから私は入力開始を検出するためにng-keyupと書いており、タイピングが停止したことを検出するためにng-model-options="{debounce:800}"と書いています。

しかし、問題はng-keyupが最初に発砲していないことです。

私はng-keyupの代わりにテキストの変化を検出するためのモデルのための時計式を書くことを考えました。

デバウンスイベントの後にウォッチ式が起動する問題がありました。タイピングが停止した後にタイピングが表示されます。

マイコード：

<textarea type="text" class="txt_message" placeholder="Type your message..." ng-enter="SendMessage()" ng-model="txtmessage" ng-change="TypingStopped()" ng-model-options="{debounce:800}" style="width:100%;"></textarea>

誰かが私にタイピング機能を取得するためのより良いオプションを提案することはできますか？事前:)

Answer 1

からkeyupで

おかげで最初のエントリに応答しません 使用NG-のKeyDown

Answer 2

あなたがlodash.debounceとスコープを使用することができます。$は、このために適用されます。 これをたくさんしているのなら、私はカスタムディレクティブをお勧めします。 私は、カスタムディレクティブを使用して、使用しないでサンプルを作成しました。

angular.module('app', []); 
 

 
angular.module('app').controller('Example', function ($scope) { 
 
    this.msg = ''; 
 
    
 
    this.onStart =() => { 
 
    this.msg = 'started'; 
 
    }; 
 
    
 
    this.onStop = _.debounce(() => { 
 
    $scope.$apply(() => this.msg = 'stoped'); 
 
    }, 1000); 
 
}); 
 

 
angular.module('app').directive('onStart',() => ({ 
 
    restrict: 'A', 
 
    scope: { 
 
    onStart: '&', 
 
    onStop: '&' 
 
    }, 
 
    link: (scope, element) => { 
 
    let isStarted = false; 
 
    
 
    element.on('keyup',() => { 
 
     scope.$apply(() => { 
 
     if (!isStarted) { 
 
      isStarted = true; 
 
      scope.onStart(); 
 
     } 
 
     }); 
 
    }); 
 

 
    element.on('keydown', _.debounce(() => { 
 
     scope.$apply(() => { 
 
     isStarted = false; 
 
     scope.onStop(); 
 
     }); 
 
    }, 800)); 
 
    } 
 
}));

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script> 
 

 
<div ng-app="app" ng-controller="Example as Ex"> 
 
    <input type="text" ng-keyup="Ex.onStart()" ng-keydown="Ex.onStop()"><br> 
 
    {{Ex.msg}}<br> 
 
    
 
    <input type="text" on-start="text = 'started'" on-stop="text = 'stoped'"><br> 
 
    {{text}}                  
 
</div>

あなたにlodashを追加したくない場合は、このデバウンスimplmentationを見てとるプロジェクト：https://github.com/component/debounce/blob/master/index.js