AngularJSでカスタムイベントを観察するには？

簡単な例：私は、TEXTAREAを持って、それに追加の動作を提供します：enterキーの上に何かをすると、私はその動作を追加するための追加の指示を提供するべきであると仮定しshift + enterAngularJSでカスタムイベントを観察するには？

に次の行に進みます。私はこれをやった：http://jsbin.com/oruvuy/1/edit

P.S. 1つのハッキーなことが私にとって奇妙に思える：私は手動で$digest()を呼び出す。大丈夫ですか？何かご意見は？

JS：

angular.module('Chat', []) 
    .directive('enterSubmit', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
     var submit; 

     $(element).on({ 
      keydown: function (e) { 
      submit = false; 

      if (e.which === 13 && !e.shiftKey) { 
       submit = true; 
       e.preventDefault(); 
      } 
      }, 

      keyup: function() { 
      if (submit) { 
       scope.$eval(attrs.enterSubmit); 

       // flush model changes manually 
       scope.$digest(); 
      } 
      } 
     }); 
     } 
    }; 
    }); 

function ChatCtrl($scope) { 
    $scope.messages = [{ 
    text: 'Sample Message', 
    datetime: new Date() 
    }]; 

    $scope.add = function() { 
    $scope.messages.push({ 
     text: $scope.message, 
     datetime: new Date() 
    }); 
    $scope.message = ''; 
    }; 

    $scope.message = ''; 
}

<body ng-controller="ChatCtrl"> 

    <h1>Leave message:</h1> 
    <form> 
    <div class='hint'>Click &lt;Enter&gt; to submit :)</div> 
    <textarea 
     cols="30" 
     rows="5" 
     ng-model="message" 
     enter-submit='add()' 
    ></textarea> 
    <br /> 
    <button type="submit" ng-click="add()">Send message!</button> 
    </form> 

    <h3>Messages list:</h3> 
    <table> 
    <tr> 
     <th>Text</th> 
     <th>Date</th> 
    </tr> 
    <tr ng-repeat="message in messages"> 
     <td class='text'>{{message.text}}</td> 
     <td class='date'>{{message.datetime | date:"HH:mm:ss"}}</td> 
    </tr> 
    </table> 

</body>

しかし、それはそれを行うための正しい方法は何ですか？

出典

2013-02-17 ValeriiVasin

はい、ディレクティブのリンク機能のバインドイベントは、まさにあなたがしたいことです。

$ digestを呼び出すのはハッキーではありません。あなたの例のメッセージはkeyupのモデルに追加されていますが、Angularはそれが何かを知らせるまでこれらの変更をダイジェストしません。実際には次ので消化されますが、keyupの後に$ digestが必要になるため、手動で呼び出す必要があります。

出典

2013-02-17 21:47:46 jingman

説明をいただきありがとうございます。しかし、私はイベントについて理解されていません。 AngularJSはページ上のすべてのイベントをリスンしてから、すべてのオブジェクトの状態を確認していますか？それについて理解できる記事はありますか？私はそれについてAngularJSを読んだことがありますが、すぐに理解するのは難しいです。 – ValeriiVasin

私は[this StackOverflow question]（http://stackoverflow.com/questions/12463902/how-does-the-binding-and-digesting-work-in-angularjs）を参考にすることをお勧めします。 – jingman

AngularJSでカスタムイベントを観察するには？

答えて

関連する問題