javascript - Angular 切换按钮似乎不起作用

Question

我有一个 Angular 应用程序，可以将文件保存为 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 ，在这种情况下它永远不会显示。

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

这一定是可能的。创建 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(); 

  });
}

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

更新:如果函数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
  });
}