Question

我正致力于让我的网站更易于访问。我遇到的问题之一是文本/背景对比。根据规范，放置高对比度开关可以实现高对比度模式。为了满足这一要求，我想在我的网站上放置一个按钮或开关，当激活该按钮或开关时，会跳过扫描文档的函数background:low-contrast，并用{{1}替换该属性}}

我用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类。当通过控制器加载时，highcontrast.css会对这些类应用高对比度颜色。有没有一个有角度的方法来做这个或我应该依靠常规的JavaScript来加载highcontrast.css？

Answer 1

在某些根元素上设置带有ng-class的'highContrast'类，例如身体。然后，在你的css中，根据这个类应用单独的css规则。

更改css中的颜色仍然非常麻烦，但至少你不会弄乱你的控制器，rootscope和html。你可以使用less或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>

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

1 个答案: