ng-disabledディレクティブを使用することができません

Question

この問題は既に解決されていますが、利用可能なすべてのソリューションを試したと思います。ですから、ng-disabledを使用して無効になっているボタンがあります。 $ scopeに変数があり、その変数が変更されたときにng-disabled属性を変更したいとします。しかし、これは私が私のng-をしたいあなたは下を見れば、私はAJAXリクエストを作っていて、そのAjaxの要求が満たされたとき、私はisDisabled変数の値を変更し、これに基づいています

<button role="buttton" class="btn btn-lg btn-success pull-right" ng-disabled="isDisabled == 'true'" id="next">Next</button> 


    app.controller('goalpathController', ['$scope', '$progress', function($scope, $progress){ 

    $scope.isDisabled = 'true'; 
    $scope.prog = $progress.getProgress() * 25; 
    console.log($scope); 
    var isAdvancedUpload = function(){ 
     var div = document.createElement('div'); 
     return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window; 
    }(); 


    var forms = document.querySelectorAll('form'); 
    Array.prototype.forEach.call(forms, function(form){ 

     var input = form.querySelector('input[type="file"]'); 

     var dropBox = form.querySelector('.box'); 
     console.log(dropBox); 


     var errorMsg = form.querySelector('.box__error span'); 

     var restart = form.querySelectorAll('.box__restart'); 

     var droppedFiles = false; 
     //for invoking the event listeners on the form 
     triggerFormSubmit = function(){ 
      var event = document.createEvent('HTMLEvents'); 
      event.initEvent('submit', true, false); 
      form.dispatchEvent(event); 
     }; 

     //hidden button which is used for form submission 
     var ajaxFlag = document.createElement('input'); 
     ajaxFlag.setAttribute('type', 'hidden'); 
     ajaxFlag.setAttribute('name', 'ajax'); 
     ajaxFlag.setAttribute('value', 1); 
     form.appendChild(ajaxFlag); 

     //automatically submit the form on file select 
     input.addEventListener('change', function(e){ 
      console.log(e.target.files); 
      droppedFiles = e.target.files; 
      triggerFormSubmit(); 
     }) 

     if(isAdvancedUpload){ 

      dropBox.classList.add('has-advanced-upload'); 
      [ 'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop' ].forEach(function(event){ 
        dropBox.addEventListener(event, function(e) 
        { 
         // preventing the unwanted behaviours 
         e.preventDefault(); 
         e.stopPropagation(); 
        }); 
      }); 
      [ 'dragover', 'dragenter' ].forEach(function(event){ 
        dropBox.addEventListener(event, function() 
        { 
         dropBox.classList.add('is-dragover'); 
        }); 
      }); 
      [ 'dragleave', 'dragend', 'drop' ].forEach(function(event){ 
        dropBox.addEventListener(event, function() 
        { 
         dropBox.classList.remove('is-dragover'); 
        }); 
      }); 
      dropBox.addEventListener('drop', function(e){ 
        droppedFiles = e.dataTransfer.files; // the files that were dropped 
        triggerFormSubmit(); 

      }); 
     } 
     form.addEventListener('submit', function(e){ 
      //preventing the multiple file loading at the same time 
      if(dropBox.classList.contains('is-uploading')){ 
       return false; 
      } 

      dropBox.classList.add('is-uploading'); 
      dropBox.classList.remove('is-error'); 

      if(isAdvancedUpload){ 
       e.preventDefault(); 

       var ajaxData = new FormData(); 


       if(droppedFiles){ 
        Array.prototype.forEach.call(droppedFiles, function(file){ 

         ajaxData.append(input.getAttribute('name'), file); 
         console.log(file); 
         for(var pair of ajaxData.entries()){ 
         console.log(pair[0] + " " + pair[1]); 
       } 

        }); 
       } 

       //ajax request 
       var ajax = new XMLHttpRequest(); 

       ajax.open(form.getAttribute('method'), form.getAttribute('action'), true); 


       ajax.onload = function(){ 
        dropBox.classList.remove('is-uploading'); 
        if(ajax.status >= 200 && ajax.status < 400){ 
         var data = JSON.parse(ajax.responseText); 

         console.log(data); 
         form.classList.add(data.success == true ? 'is-success' : 'is-error'); 

         if(data.success){ 

          $progress.incrementProgress(); 
          $scope.prog = $progress.getProgress() * 25; 
          $scope.isDisabled = 'false'; 

          var bar = document.getElementById('progressBar'); 
          var btn = document.getElementById('next'); 


          bar.setAttribute('aria-valuenow', $scope.prog); 
          bar.style.width=$scope.prog + '%'; 

          console.log(bar); 
          console.log(btn); 
          console.log($scope); 
         } 

         if(!data.success){ 
          errorMsg.textContent = data.error; 
         } 
        } 
        else{ 
          alert('Error. Please, contact the webmaster!'); 
        } 
       } 

       ajax.onerror = function(){ 
        form.classList.remove('is-uploading'); 
        alert('Error. Please try again!'); 
       } 
       ajax.send(ajaxData); 
      } 

     }); 
    }) 
}]) 

が起きていません無効にされたディレクティブは変化する。しかし、これは起こっておらず、ボタンは古い状態を維持しています。

Answer 1

角度モデルを更新するたびに、ダイジェスト内にある必要があります。ほとんどの場合、あなたのためにこれをやろうとしますが、Angularが何も知らない独自のAjaxコールバックを作成しています。

ajax.onload = function(){ 
    //... 
}; 

これは、ダイジェストサイクルをトリガするので、ビューは、実際にあなたのモデルの変化に対応します

ajax.onload = function(){ 
    $scope.$apply(function(){ 
     //... 
    }); 
}; 

をbeomeでした。