1

angular を使用してブートストラップ プログレス バーを更新しようとしています。基本的な考え方は、テキストエリアを取得し、テキストエリア行ごとにキャンバス画像をレンダリングしてから、画像を ZIP ファイルにパッケージ化することです。各 ZIP ファイルには 100 個の画像があります。ZIP ファイルの生成には JSZip を使用します。

問題は、console.log("Progress: " + $scope.progress)はリアルタイムで更新されますが、進行状況バーは最後の ZIP ファイルが作成された後にのみ更新されることです。

以下のコード スニペットもフィドルに追加しました。

http://jsfiddle.net/q1c1qrt4/24/

angular.module('myApp', [])
  .controller('myController', function ($scope, $timeout) {
  // Inicialization
  $scope.progress = 0;
  $scope.strings = ["01","02","03","04","05","06","07","08","09","10",
                   "11","12","13","14","15","16","17","18","19","20",
                   "21","22","23","24","25","26","27","28","29","30",
                   "31","32","33","34","35","36","37","38","39","40",
                   "41","42","43","44","45","46","47","48","49","50",];

  // Render canvas
  var render = function(canvas, value) {
    var context = canvas.getContext('2d');
    canvas.width = canvas.height = 1200;
    context.font="60px Georgia";
    context.fillText(value, 10, 50);
  };
  
  // Download button
  $scope.download = function() {
    $scope.progress = 0;
    var zip = new JSZip();
    var canvas = document.createElement('canvas');
    var total = $scope.strings.length;
    var i = 0;

    // For each line of the textarea
    for (i=0; i<total; i++) {
      // Render canvas
      var text = "" + $scope.strings[i];
      render(canvas, text);
      // Save canvas
      var dataURL = canvas.toDataURL();
      var base64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
      zip.file($scope.strings[i] + ".jpg", base64, {base64: true});
      $scope.progress = (i + 1) * 100 / total;
      console.log("Progress: " + $scope.progress);
      // Every 5 files save ZIP
      if ((i+1) % 5 === 0) {
        var content = zip.generate({type:"blob"});
        saveAs(content, "file" + i + ".zip");
        zip = new JSZip();
      }
    }
    // Last file
    if (i % 5 !== 0) {
      var content = zip.generate({type:"blob"});
      saveAs(content, "file" + total + ".zip");
    }
  };

});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script src="http://eligrey.com/demos/FileSaver.js/FileSaver.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <body ng-app="myApp">
    <div class="jumbotron" ng-controller="myController">
      <p><textarea>{{strings}}</textarea></p>
      <button type="button" class="btn btn-success" ng-click="download()">Download ZIP <span class="glyphicon glyphicon-cloud-download"></span></button>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': progress + '%'}">{{progress}}%
        </div>
      </div>      
    </div>   
  </body>

ng-value を試したり、style="width: 0%;"プロパティを更新したり、 を使用したりしng-style="{'width': progress + '%'}"ましたが、どちらも機能しません。

Sycomor への対応として、UI Bootstrap を使用しています。私はあなたのアプローチを試みましたが、うまくいきません。標準のプログレスバーも試しました。これを試しました：

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': progress + '%'}"></div>
</div>

これを試しました：

<div class="progress">
    <div class="progress-bar" ng-style="progressWidth" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>

、 それから：

$timeout(function() {
    $scope.progress = i * 100 / total;
    $scope.progressWidth = {
        'width': $scope.progress + "%"
    };
});

タイムアウトの有無にかかわらずすべてを試しました:(

何か案は？

4

1 に答える 1

1

への更新がprogressangular scope/$digest ループの外で行われているようです。試してみてください

$timeout(function(){
   $scope.progress = (i + 1) * 100 / total;
});
于 2014-10-02T15:52:00.273 に答える