AngularJS: Использование $ scope. $ Watch и все еще нужно $ scope. $ Apply?

Question

Я реализовал директиву filedrop, которая помещает файл в ngModel.

<filedrop data-ng-model="file"></filedrop> 

Я использую следующий код в мой контроллер:

$scope.$watch('file', function(newVal, oldVal) { 
     if (newVal) { 
      var reader = new FileReader(); 
      reader.onload = function(event) { 
       $scope.parseFile(newVal); 
      }; 
      reader.readAsDataURL(newVal); 
     } 
    }, false); 

В $ scope.parseFile Im фактически разборе XLSX:

$scope.parseFile = function(file) { 
     xlsxParser.parse(file).then(function(data) { 
      console.log("Number of columns", data.datasheet[1].length); 
      console.log("Number of rows", data.datasheet.length); 
      $scope.validationErrors = []; 
      $scope.brand = { 
       items: [] 
      }; 
      $scope.dataItems = []; 
      $scope.datasheetValidate(data.datasheet, $scope.brand); 
      $scope.datasheetData(data.datasheet, $scope.dataItems); 
      if ($scope.validationErrors.length == 0) $scope.validationErrors.push("Nice work, no validation errors"); 
      //$scope.$apply(function(){}); 
     }, function(err) { 
      console.log('error', err); 
     }); 
    } 

Как вы можете см., я прокомментировал //$scope.$apply(function(){}); в корпусе ....

НО, мне это нужно, чтобы обновить мою веб-страницу с изменениями области (например, показать validationErrors)

Почему мне нужен $scope.$apply?

Answer 1

Не имеет значения, что вы используете $ scope. $ Watch. Это не помогает, когда вы вызываете $scope.parseFile изнутри reader.onload callback, который находится за пределами области углового.

$scope.$apply следует использовать внутри самого обратного вызова:

reader.onload = function(event) { 
    $scope.$apply(function(){ 
    $scope.parseFile(newVal); 
    }); 
}; 

Answer 2

$scope.$watch и $scope.$apply дополняют друг друга.

$scope.$watch регистрирует новый наблюдатель в области. Всякий раз, когда есть цикл дайджеста, функция часов работает.

$scope.$applyзапускает цикл дайджеста - то есть, если ничего никогда не называл $scope.$apply, не наблюдатели никогда не будет работать вообще.

Для встроенных директив, которые касаются пользовательского ввода (ng-click, ng-keydown и т.д.) и встроенных услуг ($http, $location, $timeout и т.д.), угловых вызовов $scope.$watch для вас. Тем не менее, в любое время, когда вы занимаетесь асинхронным кодом, который живет за пределами этих встроенных директив или служб, вы должны сообщить Angular, что он должен начать новый цикл дайджеста, позвонив по телефону $apply.

Как уже упоминалось, Stewie, вы должны стараться, чтобы ваши звонки $apply были как можно ближе к асинхронной операции; в этом случае это означает использование его на самом верхнем уровне обратного вызова onload.

Answer 3

Единственная причина, по которой я вижу это, если xlsxParser.parse (файл). Then не является методом обратного вызова с угловым обещанием.

И как подтверждено @Sander, это действительно не угловатое обещание, поэтому здесь нужно продолжать использовать существующий $ scope. $ Apply call.