кнопка переключения в угловом не работает

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, но я предполагаю, что он асинхронный, и это тот, который занимает некоторое время. Поэтому он должен либо вернуть обещание, либо выполнить обратный вызов в параметре, который будет выполнен, когда будет выполнено сохранение (около 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 после последнего toggleSavingPdf(), если асинхронный doc.save вне углового контекста (т.е. не $http вызова, но обычный Ajax один)

UPDATE: Если функция save является синхронным и выполняется на стороне клиента, то он будет блокировать сайт, а это обработка, что означает, что пользователь, вероятно, не может нажать на кнопке в любом случае. Но то, что вы хотите сделать, это отключить кнопку, а затем отобразить HTML с этой отключенной кнопкой и только затем выполнить метод сохранения, после чего вы сможете снова включить эту кнопку. Для этого вам нужно использовать $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

Надеется, что это помогает.