AngularJS变量不会立即反映在View上,而是在Controller上更新

时间:2015-09-28 05:54:53

标签: javascript angularjs

我想要做的是从控制器功能更新AngularJS变量,当我立即更新它时更新它,但是当我打印它时大约5-8秒后查看它更新。

我尝试使用ng-model和花括号,但在两种情况下都会在视图中显示几秒钟,但在控制台中会立即更新。

我在上传回调中调用了uploadMedia函数,并且在console.log

中正常工作
$scope.UploadedMedia = function(){
      console.log($scope.Album[0].Media.length);
      $scope.UploadedMediaVal = $scope.Album[0].Media.length;
      console.log($scope.Album[0].Media.length);
    }

$scope.initFineUploader = function(){
  var fcnt = 0;
  var iuploader = new qq.FineUploaderBasic({
        multiple: true,
        autoUpload: true,
        title: "Attach Photos",
        button: $("li[data-type='uploadMediabutton']")[0],
        request: {
            endpoint: site_url + "api/uploadimage",
            customHeaders: {
                "Accept-Language": accept_language
            },
            params: {
                Type: 'ratings',
                unique_id: function() {
                    return '';
                },
                LoginSessionKey:LoginSessionKey,
                DeviceType:'Native'
            }
        },
        maxConnections : 50,
        validation: {
            acceptFiles: '.bmp,.jpeg,.jpg,.gif,.png',
            allowedExtensions: ['bmp','jpeg', 'jpg', 'gif', 'png', 'JPEG', 'JPG', 'GIF', 'PNG'],
            sizeLimit: 4194304 // 40mb
        },
        callbacks: {
            onUpload: function(id, fileName) {
                $scope.Album[0].Media.push({MediaGUID:'',ImageName:'',Caption:'',MediaType:'Image',VideoLength:'',ConversionStatus:'',IsLoader:'1',FileName:fileName});
                $scope.UploadedMedia();
                $('.rating-submit').attr('disabled','disabled');
                fcnt++;
            },
            onProgress: function(id, fileName, loaded, total) {
                $scope.Uploading = 1;
            },
            onComplete: function(id, fileName, responseJSON) {
                fcnt--;
                if (responseJSON.Message == 'Success') {
                  $($scope.Album[0].Media).each(function(mk,mv){
                    if(mv.FileName == fileName){
                      $scope.Album[0].Media[mk]['MediaGUID'] = responseJSON.Data.MediaGUID;
                      $scope.Album[0].Media[mk]['ImageName'] = responseJSON.Data.ImageName;
                      $scope.Album[0].Media[mk]['IsLoader'] = 0;

                    }
                  });
                  var fNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
                  $('li[data-filename="'+fileName+'"]').remove();
                  setTimeout(function(){
                      $('li[data-filename="'+fileName+'"] .m-laoder').remove();
                  },1000);
                } else {
                    $('li[data-filename="'+fileName+'"]').remove();
                }
                if(fcnt <= 0){
                    $scope.Uploading = 0;
                    $('.rating-submit').removeAttr('disabled');
                    $('.attached-media-list li.media-loader').remove();
                }
                $scope.UploadedMedia();
            },

            onValidate: function(b) {
                if($scope.Album[0].Media.length>=10){
                  showResponseMessage('You can upload maximum 10 images, please delete any old image to upload new one.','alert-danger');
                  return false;
                }
                var validExtensions = ['bmp','jpeg', 'jpg', 'gif', 'png', 'JPEG', 'JPG', 'GIF', 'PNG']; //array of valid extensions
                var fileName = b.name;
                var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
                if ($.inArray(fileNameExt, validExtensions) == -1) {
                    showResponseMessage('Allowed file types only bmp, jpeg, jpg, gif and png.','alert-danger');
                    return false;
                }
                if (b.size > 4194304) {
                    showResponseMessage('Image file should be less than 4 MB','alert-danger');                   
                }
            },

            onError: function(){
                $('.attached-media-list li.media-loader:last-of-type').remove();
            }
        }
    });

}

<div>
{{UploadedMediaVal}}
<span ng-bind="UploadedMediaVal"></span>
</div>

3 个答案:

答案 0 :(得分:1)

修改变量后写$scope.$apply();

答案 1 :(得分:0)

如何调用SomeOtherFunction?是在角度摘要阶段还是在dom事件中触发。在第二种情况下,您必须使用$scope. $apply (){}

包装命令

答案 2 :(得分:0)

以下是您可以帮助您http://dojo.telerik.com/UmIvO的代码示例演示 但我认为可以分享你的专辑阵列进行测试 我已经测试过它可以立即回复你可以查看你的专辑阵列。所以这可能会帮助你。