角度コントローラから条件付きでCSSをロード

Question

私は自分のウェブサイトをより使いやすくするために取り組んでいます。私が直面している問題の1つは、テキスト/背景のコントラストです。スペックによれば、高コントラストモードを可能にする高コントラストスイッチを配置するのは良いことです。この要件を満たすために、ボタンを置いたり、サイトを有効にしたりすると、background:low-contrastのインスタンスをスキャンし、その属性をbackground:high-contrastに置き換える機能を実行します。

私はng-class="{'high-contrast':highContrast}"と

function HighContrastController($rootScope) { 
    $rootScope.highContrast = false; 
} 

と

<button 
    ng-controller="HighContrastController" 
    ng-click="$root.highContrast=!$root.highContrast" 
    class="high-contrast-switch"> 
    <i class="fa text-white fa-adjust"> 
    <span class="sr-only">High Contrast Mode</span> 
    </i> 
</button> 

で仕事をしてきた。しかし、私は私が私を可能にされ、すべてのコントローラでこれを行うことを好むと思いますすべてのビューにグローバルに高コントラストを適用するために、ロジックで自分のパーツを乱雑にしないでください。

私ができることの1つは、high-contrastクラスを忘れて、lightとdarkクラスを適用することです。 highcontrast.cssは、コントローラーを介して読み込まれたときに、これらのクラスに高コントラストの色を適用します。これを行う方法がありますか、またはhighcontrast.cssを読み込むために通常のjavascriptを使用する必要がありますか？

Answer 1

ng-classを持つ 'highContrast'クラスをいくつかのルート要素に設定します。体。その後、あなたのCSSでは、このクラスに応じて別々のCSSルールを適用します。

cssの色を変更するのはまだかなり面倒ですが、少なくともコントローラ、rootscope、htmlが乱雑ではありません。あなたは、あなたのCSSをより綺麗に保つことができます。変数を使用します。

var module = angular.module('myApp', []); 
 
module.controller('accessibilityController', function() {}); 
 
module.controller('someController', function() {}); 
 
module.controller('someOtherController', function() {});

.mainContent { 
 
    color: blue; 
 
} 
 
.highContrast .mainContent { 
 
    color: red; 
 
} 
 
.highContrast .custom { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-class="{'highContrast': highContrast}" ng-controller="accessibilityController"> 
 
    <button ng-click="highContrast = !highContrast">Switch colour</button> 
 
    <div class="mainContent"> 
 
    <div ng-controller="someController">This simulates a partial view</div> 
 
    <div ng-controller="someOtherController">This also simulates a partial view</div> 
 
    <div class="custom">Customize accessibility by overriding css rules</div> 
 
    </div> 
 
</div>