2

Enterキープレスイベントをリダイレクトする次の簡単なディレクティブを作成しました。

ここで行っているように、jQuery 識別子を使用するよりも、keypress イベントを処理する別のディレクティブにメッセージを送信する方がよいと思います。

Angular の哲学と一致して、要素間通信を扱うときのベスト プラクティスは何ですか? なぜ？

ありがとう

=========================================================
.directive('redirectEnter',function() {
    return {
        restrict : 'A',
        link : function($scope,$element,$attr) {
            $element.keypress(function($event) {
                if($event.keyCode == '13') {
                    $($attr.redirectEnter).click();
                    $event.stopPropagation();
                    $event.preventDefault();
                }
            });
        }
    }
})
=========================================================
<a redirect-enter="#apply">Redirect enter example</a>
<button id="apply">Apply</button> 
=========================================================
4

1 に答える 1

0

HTML の例にはng-click、などを介してボタン要素に配線されたロジックがないため、例のために、次のようなビューを想像してみましょう。

<input ng-model="model.something">
<button ng-click="submit()">

(DOM 要素は、ディレクティブまたはコントローラーのスコープを介してロジックに関連付ける必要があることを忘れないでください。使用$("#apply").click(...)は禁止されています!)

inputこの例では、要素に「Enter」キーの押下を食べさせ、それらをボタンに「リダイレクト」させたいと言うのは簡単です。しかし、実際に「Enter」キーを押して実行したいのinputは、ボタンが実行するアクションsubmitです。この場合は、スコープでメソッドを呼び出します。

これは、評価する式をそのredirect-enter属性として取り (私はおそらくそれonEnterか何かと呼んでいます)、式を評価するディレクティブです。

<input ng-model="model.something" redirect-enter="submit()">
<button ng-click="submit()">Submit</button>

これを機能させるディレクティブは次のとおりです。

app.directive('redirectEnter', function() {
  return {
    restrict : 'A',
    link : function($scope,$element,$attr) {
      $element.keypress(function($event) {
        if($event.keyCode == '13') {
          $scope.$eval($attr.redirectEnter);
          $event.stopPropagation();
          $event.preventDefault();
        }
      });
    }
  }
});

jsFiddle の例を次に示します: http://jsfiddle.net/BinaryMuse/HgD9y/

リンク要素で同じ動作が必要な場合は、 を使用する必要があることに注意してくださいng-click。

Angular コードでプレーンな jQuery セレクターを使用しないようにするのに苦労している場合 (この回答の冒頭で述べたノーノーのように)、 Angular FAQからのこのアドバイスを検討してください。

コントローラーで DOM を変更するために jQuery を使用するのをやめます。本当。これには、要素の追加、要素の削除、コンテンツの取得、表示と非表示が含まれます。組み込みディレクティブを使用するか、必要に応じて独自のディレクティブを作成して、DOM 操作を行います。機能の複製については、以下を参照してください。

この習慣を断ち切るのに苦労している場合は、アプリから jQuery を削除することを検討してください。本当。Angular には $http サービスと強力なディレクティブがあるため、ほとんどの場合不要になります。Angular にバンドルされている jQLite には、特にイベントへのバインドなど、Angular ディレクティブを記述する際に最も一般的に使用されるいくつかの機能が含まれています。

于 2013-02-13T07:05:36.277 に答える