ng-class non si aggiorna correttamente sul cambio di valore

Question

Sto lavorando a un progetto che deve consentire agli utenti di aggiungere/rimuovere tag sulle immagini.

C'è una vista a griglia, vista singola e vista mista. La vista griglia visualizza i pollici dell'immagine in una griglia, La visualizzazione singola visualizza le immagini una per volta e la vista mista ha la griglia sullo sfondo e una singola immagine nella parte anteriore (una funzione di ingrandimento).

Tutte quelle viste hanno un piè di pagina che contiene i tag che possono essere applicati a un'immagine. Tuttavia, la griglia ha il proprio piè di pagina, mentre le viste singole e miste condividono le loro.

Ecco il codice HTML lato per quelli:

<section id="noRefContainer" class="photosWrapper photosWrapper-cq" style="display: block"> <!--ng-controller="gridController">--> 
     <div class="images-cq__wrapper" ng-show="displayStyle.style == 'grid' || displayStyle.style == 'both'"> 
      <div class="images-cq__item" ng-repeat="photo in displayedPhotos"> 
       <div ng-class="{active: photo.selected}"> 
        <label for="{{photo.uuid}}"> 
         <div class="img-cq"> 
          <img ng-src="{{photo.thumbPath100}}" alt="Alternate Text" ng-click="selectionEvent({value: photo.uuid, event: $event, index: $index})" /> 
          <a href="#" class="zoom-cq" title="zoom" ng-click="zoomOpen({value: $index})">zoom</a> 
         </div> 
         <p> 
          {{photo.title}} 
         </p> 
        </label> 
       </div> 
      </div> 
      <div class="images-cq__footer open"> 
       <p> 
        <span>Tagger les</span> 
        <strong>{{selectedPhotos.length}}</strong> 
        <span>éléments sélectionnés</span> 
       </p> 
       <div class="images-cq__dropdown top"> 
        <a href="#">...</a> 
        <ul> 
         <li><a href="#" ng-click="selectAll()">Sélectionner toutes les images</a></li> 
         <li><a href="#" ng-click="deselectAll()">Désélectionner toutes les images</a></li> 
        </ul> 
       </div> 
       <div class="images-cq__tags"> 
        <ul> 
         <li ng-repeat="tag in tags"> 
          <a href="#" ng-class="{'active': tag.status == 'active', 'selected': tag.status == 'selected'}" ng-click="tagSelectionEvent({value : tag.value})">{{tag.name}}</a> 
         </li> 
        </ul> 
       </div> 
       <small>Attention, ceci effacera les précédents tags.</small> 
      </div> 
     </div> 
     <div ng-class="{'images-cq__lightbox': displayStyle.style == 'both', 'images-cq__wrapper': displayStyle.style == 'single', single: displayStyle.style == 'single'}" ng-show="displayStyle.style == 'both' || displayStyle.style == 'single'"> 
      <div class="images-cq__carousel"> 
       <a href="" class="images-cq__carouselclose" ng-click="zoomClose()" ng-show="displayStyle.style == 'both'"> 
        Close 
       </a> 
       <div class="images-cq__carouselcontent" id="carousel"> 
       </div> 
       <div class="images-cq__carouselfooter"> 
        <div class="images-cq__tags"> 
         <ul> 
          <li ng-repeat="tag in tags"> 
           <a href="#" ng-class="{'active': tag.status == 'active', 'selected': tag.status == 'selected'}" ng-click="zoomTagSelectionEvent({value : tag.value})">{{tag.name}}</a> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 

E il codice lato app.js:

$scope.tags = []; 

$scope.tags = [{ name: 'CQ:OK', count: 0, status: '', value: 'CQ:OK' }, 
     { name: 'CQ:OK_NO_ZOOM', count: 0, status: '', value: 'CQ:OK_NO_ZOOM' }, 
     { name: 'CQ:KO', count: 0, status: '', value: 'CQ:KO' }, 
     { name: 'Chromie', count: 0, status: '', value: 'Chromie' }, 
     { name: 'Détourer', count: 0, status: '', value: 'Détourer' }, 
     { name: 'Nettoyer_redresser', count: 0, status: '', value: 'Nettoyer_redresser' }, 
     { name: 'Interne', count: 0, status: '', value: 'Interne' }, 
     { name: 'Otsc', count: 0, status: '', value: 'Otsc' }]; 

$scope.zoomTagSelectionEvent = function (tag) { 
     var photo = $scope.carousel.settings.images[$scope.carousel.settings.currentImage]; 
     if ($scope.hasTag(photo, tag.value)) { 
      $scope.removeTag(photo, tag.value); 
     } 
     else { 
      $scope.addTag(photo, tag.value); 
     } 
     $scope.updateTagStatus(tag.value); 
    } 

$scope.tagSelectionEvent = function (tag) { 
     if ($scope.allHaveTag($scope.selectedPhotos, tag.value)) { 
      $scope.allRemoveTag($scope.selectedPhotos, tag.value); 
     } 
     else { 
      $scope.allAddTag($scope.selectedPhotos, tag.value); 
     } 
     $scope.updateTagStatus(tag.value); 
    } 

$scope.updateAllTagStatus = function() { 
     angular.forEach($scope.tags, function (value, key) { 
      $scope.updateTagStatus(value.value); 
     }); 
    } 

     $scope.updateTagStatus = function (tag) { 
     var currentTag = $scope.getTag(tag); 

     if ($scope.displayStyle.style == 'grid') 
     { 
      var tagged = $scope.countTagged($scope.selectedPhotos, tag); 
      if (tagged == 0) { 
       currentTag.status = 'none'; 
      } 
      else if (tagged < $scope.selectedPhotos.length) { 
       currentTag.status = 'selected'; 
      } 
      else { 
       currentTag.status = 'active'; 
      } 
     } 
     else { 
      if ($scope.carousel.settings.currentImage !== false) 
      { 
       var photo = $scope.carousel.settings.images[$scope.carousel.settings.currentImage]; 
       var res = $scope.hasTag(photo, tag); 
       if (res) { 
        currentTag.status = 'active'; 
       } 
       else { 
        currentTag.status = 'none'; 
       } 
      } 
     } 
     console.log('tag ' + tag + ' status updated'); 
    } 

Ogni volta che un tag viene applicato a un'immagine, lo stato della variabile viene aggiornato , che dovrebbe aggiornare il risultato dell'espressione della classe ng. L'unica parte che viene aggiornata correttamente è il footer della griglia. Questo è condiviso tra gli aggiornamenti di visualizzazione singola/mista solo quando viene mostrata la vista.

Per quanto riguarda ciò che ho provato a risolvere, ho provato a utilizzare $ scope.apply() dopo ogni chiamata per l'aggiornamento dei tag, ho provato a posizionarlo alla fine della funzione updateTagStatus. Ho anche provato a cambiare le espressioni (nomi di classi con/senza virgolette, impostando la classe sullo stato del tag ...), che funzionava tutto solo per il footer della griglia, ma non per l'altro. Ho anche controllato che gli stati fossero aggiornati correttamente, l'unico problema è nell'aggiornamento del display.

Per favore aiuto.

Aggiornamento:

Mi dispiace per non rispondere a qui, ci fu un enorme elenco di evoluzioni per il progetto in un breve lasso di tempo in modo che il codice che causa questo problema non c'è più, che rimuove anche il problema del tutto. Ero impegnato a lavorare sul progetto e ho dimenticato di aggiornarlo.

Tuttavia, grazie per aver trovato il tempo di venire qui e cercare di aiutarmi.

Non sono sicuro di cosa dovrei fare in una situazione come questa.

Answer 1

Per la prima volta sembra var currentTag = $scope.getTag(tag); questa linea è il colpevole. Potrebbe non restituire il numero corretto angular object per il tag.

Oppure puoi provare a utilizzare correttamente la funzione $ apply. cioè utente $apply per ogni istruzione di aggiornamento come:

$scope.$apply(function() { currentTag.status = 'selected'; }); 

$scope.$apply(function() { currentTag.status = 'none'; });