调整窗口大小时，ng-class 动态不会改变

Posted 2023-02-23

【中文标题】调整窗口大小时，ng-class 动态不会改变

【英文标题】：ng-class dynamic doesn't change when resize window

【发布时间】：2016-05-16 17:21:13

【问题描述】：

我尝试了带有三元的 ng-class 指令，它在页面加载时效果很好。我的参考是widthWindow.xs变量，当窗口大小是移动时它是“true”，但是有一个resize把它设置为“false”但是类没有改变，ng-class没有动态改变。为什么？

在控制器中：

$scope.myResize = funcion()
   var number = $window.innerWidth;
   if (number > 767) 
      $scope.widthWindow.xs = false;
   else
      $scope.widthWindow.xs = true;
   
;

在html中：

<p ng-class="widthWindow.xs ? 'borderVoteNewsTop' : 'borderVoteNewsLeft'">Don't change when there is a resize</p>

【参考方案1】：

ngClass 指令的语法不正确。

如下使用：

<p 
  ng-class="'borderVoteNewsTop': widthWindow.xs, 'borderVoteNewsLeft': !widthWindow.xs"
>
  Change when there is a resize
</p>

查看指令文档：https://docs.angularjs.org/api/ng/directive/ngClass

【讨论】：

这是另一种可能性，但现在使用 $scope.$apply() 可以完美运行。谢谢

【参考方案2】：

由于 'resize' 事件来自 Angular 框架之外，您需要将其操作与 AngularJS 摘要循环集成。使用$apply。

$scope.myResize = function()
   var number = $window.innerWidth;
   if (number > 767) 
      $scope.$apply("widthWindow.xs = false");
   else
      $scope.$apply("widthWindow.xs = true");
   
;

$apply 执行 Angular 表达式后，会自动调用一个摘要循环，ng-class 指令中的观察者会看到变化并更新类。