Question

我正在尝试使用angular更新引导进度条。基本思想是采用textarea并为每个textarea线渲染画布图像，然后将图像打包成ZIP文件，每个ZIP文件包含100个图像。我使用JSZip生成ZIP文件。

问题是，当console.log("Progress: " + $scope.progress)实时更新时，进度条仅在最后一个ZIP文件创建后才会更新。

在下面添加了一个代码段，也是小提琴：

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 + "%"
    };
});

尝试使用和不使用超时的所有内容：（

¿任何想法？

Answer 1

看起来progress的更新发生在角度范围/ $ digest循环之外，请尝试

$timeout(function(){
   $scope.progress = (i + 1) * 100 / total;
});

使用angularjs不更新的Bootstrap进度条

1 个答案: