Javascript ng类在值更改时未正确更新

我正在做一个需要允许用户在图像上添加/删除标记的项目

有网格视图、单视图和混合视图。 栅格视图在栅格中显示图像拇指， 单视图逐个显示图像 混合视图的背景为栅格，前部为单个图像（放大功能）

所有这些视图都有一个页脚，其中包含可应用于图像的标记。但是，网格有自己的页脚，而单一视图和混合视图共享它们的页脚

以下是用于以下内容的HTML端代码：

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

{{photo.title}


塔格莱斯酒店
{{selectedPhotos.length}
选择









注意，ceci effacera les précédents标签。

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

$scope.tags=[]；
$scope.tags=[{name:'CQ:OK'，计数：0，状态：''，值：'CQ:OK'}，
{name:'CQ:OK\u NO\u ZOOM'，计数：0，状态：''，值：'CQ:OK\u NO\u ZOOM'}，
{name:'CQ:KO'，计数：0，状态：''，值：'CQ:KO'}，
{name:'Chromie'，计数：0，状态：''，值：'Chromie'}，
{name:'Détourer'，计数：0，状态：''，值：'Détourer'}，
{name:'Nettoyer_redresser'，计数：0，状态：''，值：'Nettoyer_redresser'}，
{name:'Interne'，计数：0，状态：''，值：'Interne'}，
{名称：'Otsc'，计数：0，状态：''，值：'Otsc'}]；
$scope.zoomTagSelectionEvent=函数（标记）{
var photo=$scope.carousel.settings.images[$scope.carousel.settings.currentImage]；
if（$scope.hasTag（photo，tag.value））{
$scope.removeTag（照片、标签、值）；
}
否则{
$scope.addTag（照片，tag.value）；
}
$scope.updateTagStatus（tag.value）；
}
$scope.tagSelectionEvent=函数（标记）{
if（$scope.allHaveTag（$scope.selectedPhotos，tag.value））{
$scope.allRemoveTag（$scope.selectedPhotos，tag.value）；
}
否则{
$scope.allAddTag（$scope.selectedPhotos，tag.value）；
}
$scope.updateTagStatus（tag.value）；
}
$scope.updateAllTagStatus=函数（）{
angular.forEach（$scope.tags，函数（值，键）{
$scope.updateTagStatus（value.value）；
});
}
$scope.updateTagStatus=函数（标记）{
var currentTag=$scope.getTag（标记）；
如果（$scope.displayStyle.style=='grid'）
{
var taged=$scope.counttaged（$scope.selectedPhotos，tag）；
如果（标记==0）{
currentTag.status='none'；
}
else if（标记<$scope.selectedPhotos.length）{
currentTag.status='selected'；
}
否则{
currentTag.status='active'；
}
}
否则{
如果（$scope.carousel.settings.currentImage！==false）
{
var photo=$scope.carousel.settings.images[$scope.carousel.settings.currentImage]；
var res=$scope.hasTag（照片，标签）；
如果（res）{
currentTag.status='active'；
}
否则{
currentTag.status='none'；
}
}
}
日志（'tag'+tag+'status updated'）；
}

每次将标记应用于图像时，标记状态都会更新，这将更新ng类表达式结果。唯一正确更新的部分是网格页脚。仅当显示视图时，在单个/混合视图之间共享的

至于我试图解决的问题，我尝试在每次调用标记更新后使用$scope.apply（），尝试将其放在updateTagStatus函数的末尾。我还尝试更改表达式（带引号/不带引号的类名，将类设置为标记状态…），所有这些都只适用于网格页脚，而不适用于另一个。我还检查了状态是否正确更新，唯一的问题是显示器的更新

请帮忙

更新：

我很抱歉没有在这里回答，在很短的时间内，这个项目有一个巨大的演变列表，因此导致这个问题的代码不再存在，这也完全消除了这个问题。我正忙着做这个项目，忘了更新这个

不过，谢谢你抽出时间来这里帮助我

---

我不确定在这种情况下应该怎么做。

这是第一次它看起来像

var currentTag=$scope.getTag（tag）这一行是罪魁祸首。它可能没有为标记返回正确的
角度对象

或者您可以尝试正确使用$apply函数。
i、 e.用户
$apply
用于每个更新语句，如：

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

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

这样做会容易得多