Question

我用三元组尝试了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>

Answer 1

因为＆＃39;调整大小＆＃39;事件来自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指令中的观察者将看到更改并更新类。

Answer 2

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

调整窗口大小

2 个答案: