ng-Klasse aktualisiert sich nicht ordnungsgemäß bei Wertänderung

Question

Ich arbeite an einem Projekt, das Benutzern das Hinzufügen/Entfernen von Tags in Bildern ermöglichen soll.

Es gibt Rasteransicht, Einzelansicht und gemischte Ansicht. In der Rasteransicht werden Bilddaumen in einem Raster angezeigt. In der Einzelansicht werden Bilder nacheinander angezeigt und die gemischte Ansicht hat das Raster im Hintergrund und ein einzelnes Bild auf der Vorderseite (Zoomfunktion).

Alle diese Ansichten haben eine Fußzeile, die die Tags enthält, die auf ein Bild angewendet werden können. Das Raster hat jedoch eine eigene Fußzeile, während die einzelnen und gemischten Ansichten ihre eigenen teilen. Hier

ist die HTML-Seite Code für diejenigen:

<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> 

Und die app.js Seitencode:

$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'); 
    } 

Jedes Mal, wenn ein Tag auf ein Bild angewendet wird, wird der Tag-Status aktualisiert wird , die das ng-Klasse-Ausdrucksergebnis aktualisieren sollte. Der einzige Teil, der ordnungsgemäß aktualisiert wird, ist die Rasterfußzeile. Nur wenn die Ansicht angezeigt wird, wird das zwischen Aktualisierungen einzelner/gemischter Ansichten aufgeteilt.

Was ich versucht habe, dies zu beheben, habe ich versucht, mit $ scope.apply() nach jedem Aufruf für die Tag-Aktualisierung, am Ende der updateTagStatus-Funktion versucht. Ich habe auch versucht, die Ausdrücke zu ändern (Klassennamen mit/ohne Anführungszeichen, setzen die Klasse auf den Tag-Status ...), die alle nur für die Rasterfußzeile funktionierten, aber nicht für die andere. Ich habe auch überprüft, dass die Status korrekt aktualisiert wurden, das einzige Problem besteht in der Aktualisierung der Anzeige.

Bitte helfen.

Update:

Es tut mir leid für die hier nicht beantwortet, gibt es eine riesige Liste von Entwicklungen für das Projekt in kürzester Zeit so war der Code, um dieses Problem verursacht nicht mehr ist, was beseitigt auch das Problem insgesamt. Ich war beschäftigt, an dem Projekt zu arbeiten und vergaß, dies zu aktualisieren.

Aber danke, dass du dir die Zeit genommen hast, hierher zu kommen und mir zu helfen.

Ich bin mir nicht sicher, was ich in einer solchen Situation tun sollte.

Answer 1

Zum ersten Mal sieht es aus wie var currentTag = $scope.getTag(tag); diese Zeile ist der Schuldige. Es könnte nicht korrekt angular object für Tag zurückgeben.

Oder Sie können versuchen, $ apply-Funktion richtig zu verwenden. das heißt Benutzer $apply für jede Update-Anweisung wie:

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

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