在angular（以及一般情况下）中，我非常喜欢将视图逻辑保留在我的控制器之外，而且我认为没有发生这种情况的地方是css类和ng-class的使用。
对于ng-class你可能不太熟悉，它是一个特殊的指令，允许绑定表达式并将它们作为元素的类放置。ng-class的一个非常常见的用途是这样的：
<p ng-class="{{active}}">Class applied!</p><script>
function MySimpleCtrl() {
$scope.active = 'active';
...所以在控制器中我们设置应该显示的特定类; 所以假设我们有一个类“inactive.”——我们简单地将$scope.active 变量设置为“inactive”，我们最后在视图中设置了类。
但ng-class甚至比那更好用：
ng-class接受三种不同类型的值：
立即学习“前端免费学习笔记（深入）”；
1、字符串值（类的名称）
2、字符串数组（要应用的类）
3、要评估的对象+表达式
其中选项3的语法看起来像这样
ng-class="{object of key/value pairs}[expression to evaluate]"基本上，ng-class计算表达式（在方括号中），然后使用它作为对象的键；键相关的值是应用的类。
这允许我们将$scope.active值转换为真正的布尔值（这正是我们使用它的方式）——控制器中没有视图逻辑，控制器更容易测试并且可以重用。
这是一个简单的例子：
<p ng-class="{true: 'active', false: 'inactive'}[isActive]">
Class applied
!</p><script>
function MySimpleCtrl() {
$scope.isActive = true;如果您正在使用某种条件表达式（即切换），那么您可以使用另一种非常相似的语法：
ng-class="{'selected': isSelected, 'blue': isBlue}"此处，如果selected为真，则将应用选定的类，blue类也一样。Angular将应用尽可能是真实的，因此您可以将类设置为selected和blue。
以上就是如何保持CSS类不受Angular控制器的影响的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
747
收藏
