CSS クラスが Angular コントローラーの影響を受けないようにする方法

Angular (そして一般的に) では、私はビュー ロジックをコントローラーの外に保持することが大好きですが、CSS クラスと ng-class を使用する場合はこれが起こらないと思います。

ng-class については馴染みがないかもしれませんが、これは式をバインドして要素のクラスとして配置できるようにする特別なディレクティブです。 ng-class の非常に一般的な使用法は次のとおりです:

<p ng-class="{{active}}">Class applied!</p><script>
    function MySimpleCtrl() {
        $scope.active = &#39;active&#39;;
        ...

そこで、表示する特定のクラスをコントローラーに設定します。つまり、「inactive」クラスがあるとします。 scope.active 変数は「inactive」に設定され、最後にビューにクラスを設定します。

しかし、ng-class はそれよりも優れています。

ng-class は 3 つの異なるタイプの値を受け入れます:

1。

2. 文字列配列 (適用するクラス)

3. 評価するオブジェクト式

オプション 3 の構文は次のようになります

ng-class="{object of key/value pairs}[expression to evaluate]"

基本的には ng -class は式 (角括弧内) を評価し、それをオブジェクトのキーとして使用します。キーに関連付けられた値は適用されたクラスです。

これにより、$scope.active 値を真のブール値に変換できます (これがまさに私たちの使用方法です)。コントローラーにビュー ロジックがないため、コントローラーのテストが容易になり、再利用できます。

これは簡単な例です:

<p ng-class="{true: &#39;active&#39;, false: &#39;inactive&#39;}[isActive]">
    Class applied
!</p><script>
    function MySimpleCtrl() {
        $scope.isActive = true;

ある種の条件式 (つまり、切り替え) を使用している場合は、別のよく似た構文を使用できます:

ng-class="{'selected': isSelected, 'blue': isBlue}"

Here 、 selected が true の場合、選択したクラスが適用され、青色のクラスも適用されます。 Angular は可能な限り現実的な表現を適用するため、クラスを選択済みおよび青色に設定できます。

以上がCSS クラスが Angular コントローラーの影響を受けないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。