Динамический класс ng не изменяется при изменении размера окна

Question

Я попробовал директиву ng-class с троичным, и она очень хорошо работает при загрузке страницы. Моя ссылка - это переменная widthWindow.xs, она имеет значение "истина", когда размер окна является мобильным, но при изменении размера задается значение "ложь", но класс не изменяется, а класс ng динамически не изменяется. Зачем?

в контроллере:

$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 выполняет угловое выражение, он автоматически запускает цикл дайджеста и наблюдатель в 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