3

ユーザーがアイテムのリストにコメントを残すことができるこのコードがあります。ユーザーがコメントを送信できるようにするために、ディレクティブを作成して keydown をリッスンしますkeyCode == 13。

ディレクティブ内にコメントを投稿するコードを含める必要があるかどうかわかりません。コントローラーとディレクティブの間で通信する最良の方法は何ですか?

コメントを送信する前に、入力が空かどうかも確認します。動作しますが、これが Angular のベスト プラクティスかどうかわかりませんか?

これが私のプランカーです。

4

3 に答える 3

4

ng-keydown を使用する場合は、ディレクティブを記述する必要はありません。

例：

テンプレート：

<input type="text" ng-model="myText" ng-keydown="checkKeyCode($event)">

コントローラー: -- コーヒースクリプトで書かれています

$scope.checkKeyCode = ($event)->
  if $event.keyCode == 13 and $scope.myText?
    $scope.doSomething()
于 2013-07-30T17:45:40.443 に答える
3

通常、ディレクティブがコントローラーについて何も認識しないようにするため、コントローラーとディレクティブの間で通信する最良の (Angular) 方法は、双方向バインディングを使用することです。

あなたの状況では、ベスト プラクティスは、やはり IMO ですが、入力ではなく、ボタンのディレクティブを作成することだと思います。どの「入力」を (ID で) 監視するかをボタンに指示します。何かのようなもの：

<input id="input-{{item.id}}" type="text" ng-model="currMessage" />
<button class="btnMessage" ng-click="addMessage(currMessage, item)" default-input="input-{{item.id}}">Add</button>

ETA: ディレクティブは次のようになります

http://plnkr.co/edit/HhEAUUq0IZvzblbRksBH?p=preview

myApp.directive('defaultInput', function () {
    return {
        restrict:'A',
        link: function(scope, element, attrs) {
            attrs.$observe('defaultInput', function(value) {
                var inputElement = angular.element(document).find('#' + value);
                inputElement.bind('keydown', function(e) {
                    if (e.keyCode == 13) {
                        element.click();
                    }
                });
            });
        }
    };
});

$observeコントローラーが変更されるたびにコールバックが発生するため、扱いが難しくなる可能性があるため、scope.items何らかの方法でバインドを解除して再バインドする必要があります (jQuery を使用していることは知っていますがangular.unbind、ドキュメントには表示されません)。

元のアプローチに固執したい場合は、別のオプション：

http://plnkr.co/edit/3X3usJJpaCccRTtJeYPF?p=preview

HTML

<input id="input-{{item.id}}" type="text" ng-model="currMessage" enter-fires-next-button />

JavaScript

myApp.directive('enterFiresNextButton', function() {
  return function(scope, element, attrs){
    element.on('keydown', function(e){
      if(e.keyCode == 13) {
        element.next('button').click();
      }
    });
  }
});
于 2013-05-08T20:02:24.833 に答える
1

コントローラーとディレクティブの間で通信する最良の方法は何ですか?

場合によって異なります...最初に、ディレクティブに適したスコープのタイプを決定するのが好きです: 新しいスコープなし、新しいスコープ、または新しい分離スコープ。AngularJS でディレクティブを記述する場合、新しいスコープ、新しい子スコープ、または新しい分離スコープが必要ないかどうかを判断するにはどうすればよいですか? を参照してください。

それが決定されると、次の決定は、通信が本当にサービスに送られるべきかどうかを決定することです。その場合、コントローラーとディレクティブは、相互ではなく、サービスの注入と対話の両方を行います。

サービスが必要ない場合は、コントローラーとディレクティブの間の通信を容易にするために属性が使用されます。それがどのように行われるかは、ディレクティブが作成するスコープのタイプによって決まります。ヒント: 分離スコープを使用$parseしない場合は、ディレクティブ内のプロパティを取得および設定するか、ディレクティブ内からコントローラーのメソッドを呼び出すために使用します -- を参照してください

于 2013-05-08T23:01:51.080 に答える