I am working on a project that should allow users to add / remove tags on images.
There is a grid view, one view and a mixed view. The grid view displays the thumbs of the image in the grid, One view displays the images one by one and the mixed view has the grid in the background and one image in front (zoom function).
All of these views have a footer containing tags that can be applied to the image. However, the grid has its own footer, while separate and mixed views separate them.
Here is the HTML code for them:
<section id="noRefContainer" class="photosWrapper photosWrapper-cq" style="display: block"> <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>
And the side code of 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'); }
Each time a tag is applied to an image, the status of the tag is updated, which should update the result of an expression of class ng. The only part that gets properly updated is the grid footer. This is shared between one-time / mixed view updates only when the view is displayed.
As for what I was trying to fix, I tried to use $ scope.apply () after each call to update the tag, tried to place updateTagStatus at the end of the function. I also tried changing the expressions (class names with quotes / without quotes, setting the class to tag status ...), which all worked only for the footer, but not for the other. I also checked that the statuses were updated correctly, the only problem is updating the display.
Please, help.
Update:
I am sorry that I did not answer this question, for a short period of time there was a huge list of changes for the project, so the code causing this problem will no longer be, which also completely fixes the problem. I was busy working on the project and forgot to update it.
However, thanks for taking the time to come here and try to help me.
I am not sure what I should do in such a situation.