2

私はこれを数時間研究してきました。

$('#bottom .downloads .links a').click..... の jQuery セレクターがあるとします。

Angular ディレクティブで同じタイプのことを行うにはどうすればよいですか?

これは私がこれまでに持っていたものであり、機能しますが、ページ上のすべてのタグに対して.

angular.module('directives', []).directive('a', function(mongoDB){ //Don't need ['customServices'], it can just be [] to use mongoDB
return {
    restrict : 'E',
    link : function(scope, element, attrs){     
    element.on('click', function(){
        //But this gets called for all links on the page
                //I just want it to be links within the #bottom .downloads .links div
                //I wanted to use a directive instead of ng-click="someMethod()"
    });
}

});

このディレクティブを特定の div のみをターゲットにする方法はありますか? 制限を 'C' または 'A' に変更して、リンクに属性を追加できると思いますが、現在 jQuery セレクターで慣れているようにフロント エンドをレイアウトできるかどうか疑問に思っていました。

4

2 に答える 2

5

AngularJS と jQuery の間には、かなり重要な哲学上の違いがあります。jQuery では、データを含むすべてが DOM 内にあり、DOM 変換を通じてすべてを行います。一方、AngularJS には、関心の分離が組み込まれています。モデル、ビュー、コントローラー、サービスなどはすべて分離されています。コントローラーを使用してコードを結合しますが、各コンポーネントは他のコンポーネントについて何も知りません。

したがって、jQuery では、セレクターを使用して特定のパターンに一致するすべてのリンクを検索し、それに特定の機能 (クリック ハンドラーなど) を追加することができますが、AngularJS では HTML が「公式記録」です。クリック ハンドラーのアタッチメントを JavaScript 関数に抽象化する代わりに、マークアップに直接配置します。

<a ng-click="doWhatever()">Click me!</a>

この場合、doWhateverページのその部分のスコープのメソッドであり、おそらくコントローラーで設定されます。

$scope.doWhatever = function () {
  console.log("Hello!");
}

したがって、問題にアプローチしている方法は、AngularJS では機能しません。代わりに、関数を使用した jQuery セレクターのようなディレクティブではなく、HTML の拡張としてディレクティブを検討する必要があります。あなたは自問自答します。あなたの答えはあなたの指示です。

しかし、AngularJS には既にクリック ハンドラー用の組み込みディレクティブがあります (ngClick上記で使用)。

于 2013-01-30T21:15:43.370 に答える
1

Angular には既にaディレクティブがあるため、独自のディレクティブを作成しないでください。

Angular の世界では、「特定の div のみをターゲットにする」(つまり、div 内の <a>) には、CSS のようなセレクターを使用するのではなく、ディレクティブを使用してその <a> を宣言的にターゲットにします。はい、「A」に制限し、 <a> に属性を追加するのが最善です：

<a ... target-this-one>...</a>

個人的にはこちらの方が読みやすいと思います。HTML を見ると、どの <a> に特別な機能や追加機能があるかが明確です。

@Josh が指摘したように、ng-click がニーズに十分でない場合にのみ、これを行う必要があります。

于 2013-01-30T21:13:37.863 に答える