ng-class 动态在调整大小时不会改变 window

Question

我尝试了带有三元的 ng-class 指令，它在页面加载时运行良好。我的参考是 widthWindow.xs 变量，当 window 大小是移动时它是 "true"，但是有一个调整大小把它放到 "false" 但是 class不改变，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>

Answer 1

由于 '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指令中的watcher会看到变化并更新class.

Answer 2

ngClass 指令的语法不正确。

按如下方式使用：

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

Check out the directive documentation: https://docs.angularjs.org/api/ng/directive/ngClass

ng-class 动态在调整大小时不会改变 window

ng-class dynamic doesn't change when resize window

angularjs

ternary-operator

ng-class