ng-styleを使用したAngularJSの幅の設定

S3からのイベントが発生したときにdivのサイズを動的に変更したいと思います。私はPARAMとしてupdateProgress関数にprogress変数を送信し、次のコードでng-styleを使用したAngularJSの幅の設定

。この機能は、角度コントローラの最高の範囲にあります。

s3.upload(params).on('httpUploadProgress', function(evt) { 
     var progress; 
     progress = Math.floor(evt.loaded * 100/evt.total); 
     updateProgress(progress); 
    }) 
    .send(function(err, res, data) { 
     if (err) { 
      growl.error("We're having trouble uploading your image. Please try again!", {title: 'Whoops!', ttl: 5000}); 
      console.log('Error uploading' + err); 
     } else { 
      imgLocation = res.Location; 
      postToFirebase(imgLocation); 
     } 
    });

は、ここに私のUpdateProgress機能

function updateProgress(percent) { 
    $scope.progressBar = { 
     'width': percent + '%' 
    } 
}

HTML

<div ng-style="progressBar" class="shot__image--post__progress"></div>

私は成功したAWSのイベントや進捗値をCONSOLE.LOGすることができます。しかし、画像をアップロードすると、幅は決して変わりません。

出典

2016-08-22 Cole Roberts

あなたは 'console.log'をどこに入れましたか？あなたは 'function updateProgress（percent）'の中でそれをチェックしましたか？ –

updateProgress関数から 'console.log'を確認しましたが、正しい値が記録されています。ここにスクリーンショットがあります：http://imgur.com/a/GXdNt –

@cole Roberts、デバッガを 'updateProgress'メソッドに置き、' percent'の値を観察します。可能であれば、Fiddle/Plnkrを追加することができます。 –

Answer from PhilこのスレッドのコメントでS3ライブラリを想定し

は、あなたが $スコープで$スコーププロパティの変更をラップする必要がサイクルをダイジェスト角度にの一部または関与していない。$は、スコープを適用するか、または$。$ applyAsync。 docs.angularjs.org/api/ng/type/$rootScope.Scope#$applyを参照してください。ユーザーラグーは、この先には答えが、解決策は、単にupdateProgress FN内$scope.$apply()を呼び出すことでした何らかの理由

ためにdownvotedました。

出典

2016-08-22 05:25:11

ng-styleを使用したAngularJSの幅の設定

答えて

関連する問題