2

ディレクティブ定義内には、$elementと$attrsにアクセスするためのAPIがあるため、ディレクティブが呼び出された要素を参照することができます。ng-classなどの標準ディレクティブを使用してカスタム関数を呼び出すときに$elementと$attrsにアクセスするにはどうすればよいですか？

編集：これは慣用的なアプローチではないことを理解しています。この質問は、ラピッドプロトタイプに当てはまります。これは、Angularの多くの機能に最適です。持続可能性、関心の分離などに関するものだけではありません。私の主な関心事は速度です。したがって、組み込みのディレクティブとクイックコントローラーメソッドを使用して何かをすばやく実行できることは、実際には美徳であり、将来的にはより完全で適切な実装を行う機会を得ることができます...

この場合、この投稿とこの投稿のよう.activeに、の値に基づいて、nav要素にコンテキストクラスを追加しているだけです。ただし、これらの例では、呼び出し元の関数への引数として、属性の内容のコピーを明示的かつ冗長に渡す必要があります。しかし、プログラムで内部から属性にアクセスし、同一のコンテンツを引数として重複して渡すことを回避する方法はありませんか？$location.path()hrefgetClass()ng-classhrefgetClass()

たとえば、getClass()私が想像したとおりの機能を備えたコントローラーは、次のように機能します。

function navCtrl($scope, $routeParams) {
    $scope.getClass = function($element, $attrs) {
        if ($location.path().substr(0, path.length) == $attrs.href) {
            return "active"
        } else {
            return ""
        }
    }
}

次に、次のように簡単かつエレガントに呼び出すことができます。

<a ng-class="getClass()" href="/tasks">Tasks</a>

それよりも：

<a ng-class="getClass('/tasks')" href="/tasks">Tasks</a>

（別のオプションはこれを行うカスタムディレクティブを作成することですが、今のところ、ディレクティブによって呼び出されたコントローラー関数内から$attrsや$elementにアクセスできるかどうかを調べたいと思います。ありがとう！）

4

3 に答える 3

5

あなたは実際にこれを行うことができます...しかし、あなたはこれを行うべきではありません。笑...

これがあなたが求めていることをする方法です...

マークアップで、$eventを関数に渡します。

<a ng-click="test($event)" href="whatever">Click Me</a>

次に、コントローラーで、イベントのターゲット要素を取得します。

$scope.test = function($event) {
    alert($event.target.href);
};

これが、おそらくこれを行うべきではない理由です。

DOMを参照するか、コントローラーでDOMを操作すると、依存性の注入と、Angular構造内からの関心の分離が危険にさらされます。関数をテストしている場合でも、依存関係として$ eventを挿入することはできますが、その関数内で実行していることによっては、DIが台無しになっている可能性があり、コントローラーにディレクティブを実行させようとしています。作業（コントローラーがマークアップに緊密に結合されないようにすることです）

とは言うものの、すべての作業が値を取得しているだけの場合は、おそらく問題ありませんが、コントローラーをマークアップにある程度結合していることになります。そのDOM要素で他のことをしている場合は、予約から外れています。

于 2012-10-26T01:06:24.480 に答える
2

私はあなたがそれをすることができないと思います。角度の哲学は、コントローラーから直接DOMにアクセスしないようにすることです。Angularでこれを行うための2つのオプションをすでに特定しました。

  • hrefをパラメータとして渡します。getClass（'/ tasks'）
  • または、カスタムディレクティブを記述します

または、クラスが純粋にプレゼンテーションであり、アプリケーションの実行方法に影響を与えない場合は、angularを無視し、すばやくダーティなjQuery関数を使用してジョブを実行できます。

DOMとの直接の相互作用の欠如は、最初は少し奇妙かもしれませんが、コードベースが成長し、より複雑になり、より多くのテストが必要になるにつれて、長期的には天の恵みになります。

于 2012-10-25T23:20:02.040 に答える
0

これはまったく異なる答えです。hrefに基づいてスタイルを変更するためにAngularは必要ありません。そのためにCSSセレクターを使用できます。

あなたのスタイルで：

a[href="/something"] {
    background-color: red;
}

それはあなたがng-classでしているかもしれない何かと組み合わせてあなたが必要とするすべてであるべきです。

于 2012-10-26T11:32:27.527 に答える