Question

我有一个角度应用程序，我将文件保存为pdf。我想要发生的是，当用户单击保存按钮时，保存按钮会在创建文件时消失，因此用户不会多次按下该按钮。

我拥有的是

function toggleSavingPdf(){
  return scope.savingPdf = !scope.savingPdf;
}

function saveToPdf(){
  toggleSavingPdf();

  var doc = new jsPDF();

  scope.docs.forEach(function(img, idx){
    if(img.src){
      console.log('index of page', idx);
        if(idx>0) doc.addPage();
        doc.addImage(img.src,'png',0, 0, 210, 290);
     }
     if(idx===scope.docs.length-1){
       console.log('change saving', scope.savingPdf);
       toggleSavingPdf();          }
  });

  doc.save('Kiosk.pdf');
}

在我的模板中我有

<div id="document-list" ng-show="savingPdf">

但文档列表永远不会隐藏，除非我将ng-show更改为ng-hide，在这种情况下它永远不会显示。

我在每个scope.$apply()之后尝试运行toggleSavingPdf()，但它告诉我申请已在进行中。

这一定是可能的。创建pdf大约需要3秒以上，因此用户有足够的时间多次点击按钮。

Answer 1

因为代码永远不会等待任何事情。因此，即使保存文件需要3秒，您的代码也会立即执行。

我不知道你的函数doc.save的代码，但我认为它是异步的，它需要一些时间。因此它应该返回一个promise，或者在保存完成时执行的参数中进行回调（约3秒后）。

您的代码将成为：

function saveToPdf(){
  toggleSavingPdf();

  var doc = new jsPDF();

  // Save the PDF
  doc.save('Kiosk.pdf', function() {
    // Now it is saved, execute the rest

    scope.docs.forEach(function(img, idx){
      if (img.src) {
        console.log('index of page', idx);
        if(idx>0) doc.addPage();
        doc.addImage(img.src,'png',0, 0, 210, 290);
      }
    });

    // No need to put that into the forEach, forEach is
    // synchroneous so that will be executed only after
    console.log('change saving', scope.savingPdf);
    toggleSavingPdf(); 

  });
}

请注意，如果异步scope.$apply超出Angular上下文（即不是toggleSavingPdf()调用而是常规Ajax，则可能需要在最后doc.save之后调用$http一个）

更新：如果函数save是同步的并且在客户端执行，那么它将在处理时阻止网站，这意味着用户可能无论如何都无法点击该按钮。但是你要做的是禁用按钮，然后用禁用的按钮渲染HTML，然后执行save方法，之后你可以再次启用按钮。为此，您需要使用$timeout确保Angular在保存文档之前更新了DOM。见代码：

function saveToPdf(){
  toggleSavingPdf();

  // Let Angular some time to render the DOM with the disabled button
  $timeout(function() {

    // Now we can save the PDF

    var doc = new jsPDF();   
    doc.save('Kiosk.pdf');

    scope.docs.forEach(function(img, idx){
      if (img.src) {
        console.log('index of page', idx);
        if(idx>0) doc.addPage();
        doc.addImage(img.src,'png',0, 0, 210, 290);
      }
    });

    console.log('change saving', scope.savingPdf);
    toggleSavingPdf(); 

    // No need to call scope.$apply here, $timeout will take care of that
  });
}

Answer 2

由于您没有提供足够的信息以确保我只是在黑暗中拍摄并认为它是最常见的问题：范围问题。

如果您的功能在子范围内运行，那么不要期望您的父变量发生变化。 Example

一种解决方案是更新对象属性而不是范围变量。

$scope.progress.savingPdf = true;

Example

希望这有帮助。

角度切换按钮似乎没有效果

2 个答案: