AngularJS中存在与$scope变量相关的问题.UI中的值未更改

Having issue related to $scope variable in AngularJS. Value is not changed in UI

本文关键字:UI 问题 存在 scope AngularJS 变量      更新时间:2023-09-26

即使范围变量发生了更改,image的值也不会在UI中更新。

主控制器:

$scope.TVuploadModal = function($files) {
                $scope.TvTemp.file = $files[0];
                $scope.TvTemp.fileName = $files[0].name
                var fileReader = new FileReader();
                fileReader.readAsDataURL($scope.TvTemp.file);
                fileReader.onload = function(e) {
                    $timeout(function() { $scope.TvTemp.file.dataUrl = e.target.result; });
                };
                $scope.ResourceOpenBannerImageCrop('lg');
            }
            $scope.ResourceOpenBannerImageCrop = function(size) {
                $modal.open({ templateUrl: 'BannerImageCrop.html', controller: 'resourceBannerImageCropCtrl', backdrop: 'static', size: size, scope: $scope,
                    resolve: {
                        TVImages: function () {
                          return $scope.TVImages;
                        }
                      }
                }).result.then(function(images) { 
                    console.log("Hello.....");
                    console.log($scope.TVImages);
                /*$scope.TVImages = images;*/ });
            };

resourceBannerImageCropCtrl:

app.controller('resourceBannerImageCropCtrl', function($scope,$rootScope,TVImages,$routeParams, $modalInstance, $location, $upload,ResourceAdditionStepsUpdateService,mediaUploadService) {
    $scope.myCroppedImage = '';   
    $scope.TVImages1 = TVImages;
    $scope.showSpinner = false;
    $scope.imageCrop = function() {
        $scope.showSpinner = true;
        var requestMap = { imagedata:$scope.myCroppedImage, fileName:$scope.TvTemp.fileName, fileType:"Resource Images", userId: $rootScope.currentLoggedInUserId }
        var saveResourceImages = mediaUploadService.saveImagesToUserBucket(requestMap, function(response) {
            $scope.showSpinner = false;
            if (response.isSuccess) {
                var image = {}
                image.uniqueKey = response.data.uniqueKey
                image.fileUrl = response.data.url
                image.fileType  = "Resource Images"
                image.description = $scope.description  
                image.type = "IMAGE"
                image.s3UploadStatus = response.data.s3UploadStatus
                    ResourceAdditionStepsUpdateService.saveResourceImages({resourceId : $scope.resourceMetadata.resourceData.id , image : image},function(response){
                        console.log(response.data.mediaList);
                        $scope.showSpinner = false;
                        if(response.isSuccess){
                            $scope.TVImages1 = [];
                             $scope.TVImages1 = response.data.mediaList;
                             if (!$scope.$$phase) {
                                    $scope.$apply();
                                }
                        }
                    });
                $modalInstance.close(/*$scope.volcareTVImages*/);
            }
        })
    };
    $scope.cancel = function() { $modalInstance.dismiss('cancel'); };
});

HTML:

<div class="col-sm-4 mb20" ng-repeat="image in TVImages">
   //content
</div>

我在resolve中传递作用域变量(即$scope.TVImages),正如您在代码中看到的那样,我正在更新$scope.TVImages1

根据我对双向数据绑定的理解,如果$scope.TVImages1被更新,那么$scope.TVImages也应该通过resolve进行更新。

我也尝试过使用$scope.$apply,但没有成功。

我做错了什么?

Qasim,

几天前,我在更新$scope变量的值时也遇到了这种问题,该变量在视图中被分配为ng重复变量

能否请您尝试使用以下行而不是$scope.TVImages

$rootScope.TVImages,它将更新视图变量。

如果你还面临一些问题,请告诉我。