从角度控制器有条件地加载css

Question

我正在努力使我的网站更容易访问。我遇到的问题之一是文本/背景对比。根据规范，放置一个高对比度开关可以实现高对比度模式。为了满足这一要求，我想在我的站点上放置一个按钮或开关，当激活时，这个按钮或开关会触发一个函数，该函数扫描文档以查找background:low-contrast的实例，并将该属性替换为background:high-contrast。

我和ng-class="{'high-contrast':highContrast}"一起完成了这份工作

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

使用

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

但我想我更喜欢在控制器中完成所有这些，这将使我能够对所有的视图应用高对比度，而不把我的部分逻辑弄得乱七八糟。

我可以这样做的一种方法是忘记high-contrast类，并应用light和dark类。当通过控制器加载时，highcontrast.css将对这些类应用高对比度颜色。有什么方法可以做到这一点吗?还是应该依靠常规的javascript来加载highcontrast.css？

Answer 1

在一些根元素(例如body )上设置一个带有ng类的'highContrast‘类。然后，在css中，根据这个类应用独立的css规则。

更改css中的颜色仍然非常麻烦，但至少您没有弄乱控制器、根范围和html。您可以通过使用更少或更少的sass来保持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>

​