Ng-Class не обнаруживает изменений

Question

На странице У меня есть ng-repeat, который выполняет итерации через элементы в коллекции. Каждый элемент имеет свойство status, согласно которому я добавляю некоторый класс или нет. И у каждого элемента есть кнопка, onclick он меняет статус элемента и делает запрос PUT API.

Поскольку моя коллекция на странице обновляется каждые 2 минуты, у меня есть проблема после нескольких обновлений. Через 5-6 минут я нажимаю на кнопку, которая делает PUT запрос (успешно), но моя функция ng-class не обнаруживает, что status предмета изменился.

<div class="one-third" ng-repeat="request in requests track by request.id"> 
     <div class="incoming_request" ng-class="actionClass(request)"> 
      <h2 ng-class="DayTypesClasses[request.typeId]" ng-bind="request.type"></h2> 
      <hr> 
      <div class="request_description"> 
       <p><span>Description:</span></p> 
       <p ng-bind="request.baseComment"></p> 
      </div> 
      <div class="request_resolve"> 
       <hr> 
       <div class="textarea-holder"> 
        <textarea placeholder="Your comment..." ng-model="request.newComment" ng-model-options="{ updateOn: 'default blur'}"></textarea> 
       </div> 
       <div class="button-container"> 
        <button ng-click="approve(request);" class="btn btn-primary">Confirm</button> 
        <button ng-click="reject(request);" class="btn btn-default pull-right" am-hide-request-resolve-div>Reject</button> 
       </div> 
      </div> 
     </div> 
</div> 

и JS-код

$scope.approve = function (request) { 
     var status = State.APPROVED; 

     var currentUserComment = request.comments.filter(function(comm) { 
       return comm.userId == user.id && comm.status == "Pending"; 
      })[0]; 
     currentUserComment.status = status; //change status 
     currentUserComment.text = request.newComment; 

     delete request.newComment; 

     if (!currentUserComment) { 
      request.isProcessing = false; 
      return; 
     } 

     Comments.update(currentUserComment, function() { 
      // $rootScope.$broadcast('daysUpdated'); 
     }); 

     request.isProcessing = false; 
    }; 

Ng-class функция:

$scope.actionClass = function(request) { 
     var currentUserComment = request.comments.filter(function(comment) { 
      return comment.userId == user.id; 
     })[0]; 
     //after click here status for every item isn't changed. Tested in debug mode 
     if (!currentUserComment || currentUserComment.status == State.APPROVED || currentUserComment.status == State.REJECTED) { 
      return 'you-approved'; 
     } 
    } 

Так как результат после нескольких обновлений моей коллекции (requests коллекции я имею в виду) OnClick JS не в состоянии добавить класс you-approved.

---

Я пропустил одну деталь ВАЖНЫЕ - я изменить статус не пункт request но для элемента, который существует в request.comments. Так что я не могу просто написать ng-class="{'you-approved': request.approved}"

---

Как @Cyril предложил я пытался использовать этот мир кода в моем контроллере

$scope.$apply(function(){$scope.requests = CurrentUserData.getRequests();}), но сообщение об ошибке $digest already in progress.

Также я пытался использовать услугу angualr $interval вместо функции window.setInterval, которая обновляет коллекцию requests каждые 2 минуты, но, похоже, не помогает.

Answer 1

Как насчет:

ng-class="{'you-approved': !currentUserComment || currentUserComment.status == State.APPROVED || currentUserComment.status == State.REJECTED}" 

Вот пример этой логики, используя plunker:

https://plnkr.co/edit/hoTnrLBAibMJ0wd2WMzm?p=info

HTML:

<button ng-click="setApproved()">Set Approved</button> 
<button ng-click="setRejected()">Set Rejected</button> 
<button ng-click="setSomethingElse()">Set Something Else</button> 

<hr /> 

<span ng-class="{'you-approved': !currentUserComment || currentUserComment.status == 'approved' || currentUserComment.status == 'rejected'}">Test</span> 

Контроллер JS:

$scope.setApproved = function(){ 
     $scope.currentUserComment = { 
     status: 'approved' 
     } 
    } 

    $scope.setRejected = function(){ 
     $scope.currentUserComment = { 
     status: 'rejected' 
     } 
    } 

    $scope.setSomethingElse = function(){ 
     $scope.currentUserComment = { 
     status: 'somethingElse' 
     } 
    } 

https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

посмотреть на:

https://docs.angularjs.org/api/ng/directive/ngClass

ваше выражение нг-класс оленьей кожи необходимо вернуть свойство класса, но с JSON, который содержит имя класса с условием

so change

<h2 ng-class="DayTypesClasses[request.typeId]" ng-bind="request.type"></h2> 

к:

<h2 ng-class="{'you-approved': request.approved}" ng-bind="request.type"></h2> 

и JS-кода обновления утвержденного параметра