javascript – ng-class在值更改时无法正确更新

我正在开发一个项目,需要允许用户在图像上添加/删除标签.

有网格视图,单视图和混合视图.
网格视图在网格中显示图像大拇指,
单个视图逐个显示图像
并且混合视图在背景中具有网格,并且在前面具有单个图像(放大特征).

所有这些视图都有一个页脚,其中包含可应用于图像的标记.然而,网格有自己的页脚,而单一和混合视图共享他们的页脚.

以下是这些的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>

和app.js边码：

$scope.tags = [];

$scope.tags = [{ name: 'CQ:OK',count: 0,status: '',value: 'CQ:OK' },{ name: 'CQ:OK_NO_ZOOM',value: 'CQ:OK_NO_ZOOM' },{ name: 'CQ:KO',value: 'CQ:KO' },{ name: 'Chromie',value: 'Chromie' },{ name: 'Détourer',value: 'Détourer' },{ name: 'Nettoyer_redresser',value: 'Nettoyer_redresser' },{ name: 'Interne',value: 'Interne' },{ name: 'Otsc',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');
    }

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

至于我试图解决这个问题,我已经尝试在每次调用标记更新后使用$scope.apply(),尝试放置在updateTagStatus函数的末尾.我也尝试更改表达式(带有/不带引号的类名,将类设置为标签状态…),这些只适用于网格页脚,但不适用于其他页面.我还检查了状态是否正确更新,唯一的问题是更新显示.

请帮忙.

更新：

我很抱歉没有在这里回答,在很短的时间内有一个巨大的项目演变清单,因此导致这个问题的代码不再存在,这也完全消除了这个问题.我正忙着处理这个项目并忘了更新它.

但是,感谢您抽出宝贵时间来到这里并尝试帮助我.

我不确定在这种情况下我应该做些什么.

解决方法

这是第一次看起来像var currentTag = $scope.getTag(tag);这条线是罪魁祸首.它可能没有为标签返回适当的角度对象.

或者您可以尝试正确使用$apply功能.
即user $申请每个更新语句,如：

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

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

原文地址：https://www.jb51.cc/js/157357.html

javascript – ng-class在值更改时无法正确更新

解决方法

相关推荐