Css'yi açısal denetleyiciden koşullu olarak yükleme

Question

Web sitemi daha erişilebilir hale getirmek için çalışıyorum. Karşılaştığım konulardan biri metin/arka plan kontrastı. Spesifikasyona göre, yüksek kontrastlı bir mod sağlayan yüksek kontrastlı bir anahtar yerleştirmek iyidir. Bu gereksinimi karşılamak için, bir buton yerleştirmek veya sitemi etkinleştirmek istediğimde, etkinleştirildiğinde, belgeyi background:low-contrast örneklerini tarayan ve bu özniteliğin background:high-contrast ile değiştirdiği bir işlevi gezer.

Ben

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

ile ng-class="{'high-contrast':highContrast}" ve

<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> 

ile iş yaptık Ama beni sağlayacak olan, bütün denetleyicisi bunu tercih ediyorum düşünüyorum Kısmenleri mantıkla karıştırmadan tüm görüşlere global olarak yüksek kontrast uygulamak.

Bunu yapmanın bir yolu, high-contrast sınıfını unutmak ve light ve dark sınıflarını uygulamak olacaktır. highcontrast.css, denetleyiciye yüklendiğinde bu sınıflara yüksek kontrastlı renkler uygular. Bunu yapmak için açısal bir yol var mı yoksa highcontrast.css yüklemek için düzenli javascript güvenmeli miyim?

Answer 1

Bazı kök öğelerinde ng sınıfı olan bir 'highContrast' sınıfı ayarlayın, örn. vücut. Daha sonra, css'inize, bu sınıfa bağlı olarak ayrı css kuralları uygulayın.

Css'deki rengi değiştirmek hâlâ oldukça hantal, ancak en azından kontrol cihazlarınızı, köklerinizi ve html'nizi karıştırmıyorsunuz. Css'inizi daha az veya sass kullanarak nispeten temiz tutabilirsiniz, bu kesinlikle işleri basit tutmaya yardımcı olur, örn. değişkenleri kullanarak. Benim anahtar NavBarController bir navbar kontrolörün içinde olduğunda

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>