Проблемы с угловым охватом

Question

У меня проблема, когда по форме в моем ng-controller, похоже, не меняется свойства в контроллере, который, как я думал, будет. После некоторого чтения вокруг это кажется, что я не полностью знал о прототипном наследовании, но благодаря internet и SO я обновил свой код как таковой. Но, к сожалению, он все еще не работает, и я не могу понять, почему.

Вот мой HTML

<div ng-app="licenceApp" ng-controller="licenceController">  
    <div class="hover panel" ng-class="{switch : licenceFormVisible}"> 
     <div class="highlightedSection nosidepad clearfix back"> 
      <div class="highlightedSubSection" ng-class="{fullsize : uploadModel.active}" ng-show="!Applying && !FinishedWithErrors && !offlineActivationScreenVisible"> 
       <h2>Licence File</h2> 
       Upload and apply a valid licence file{{uploadModel.active}}<br /><br /> 
       ... 
       <form id="hiddenUploadForm" name="hiddenUploadForm" target="hiddenUploadFormFileTarget" action="/settings/uploadILP" method="post" enctype="multipart/form-data" style="display: none;"> 
        <input id="hiddenUploadFormFile" name="file" type="file" ng-model="uploadModel.uploadFileName" onchange="angular.element(this).scope().uploadFileChanged()" /> 
        <iframe id="hiddenUploadFormFileTarget" name="hiddenUploadFormFileTarget" iframe-onload="uploadFileFinished()"></iframe> 
       </form> 
      </div> 
     </div> 
    </div> 

ViewModel

angular.module('licenceApp.controllers', []) 
    .controller('licenceController', ['$scope', 'licenceAPIservice', '$filter', '$timeout', function ($scope, licenceAPIservice, $filter, $timeout) { 
     $scope.uploadModel = { 
      active: false, 
      uploadFileName: "", 
      uploading: false 
     }; 

     $scope.uploadFileChanged = function() { 
      $scope.uploadModel.active = true; 
      $scope.uploadModel.uploading = true; 

      $('#hiddenUploadForm').submit(); 
     } 
     ... 

Так что, когда я меняю uploadModel.active в функции он показывает правильное значение через console.log, но дисплей оленья кожа имитируют новое значение! Я все еще подвержен прототипному наследованию здесь? Обратите внимание, что при изменении управления входным файлом удаляется uploadFileChanged.

Answer 1

onchange - это событие javascript вне угла, поэтому вам нужно будет позвонить $apply, чтобы уведомить угловую информацию об изменениях в области. К счастью, существует угловая директива, которая делает это для вас (ng-change).

<input id="hiddenUploadFormFile" 
     name="file" type="file" 
     ng-model="uploadModel.uploadFileName" 
     ng-change="uploadFileChanged()" /> 

EDIT:

ngModel не работает с входным типа = файл (issue), следовательно, ngChange не будет работать, как это требуется ngModel работать.

Правильный способ приблизиться к нему тогда будет заключаться в вызове $ apply внутри функции uploadFileChanged.

HTML:

<input id="hiddenUploadFormFile" 
     name="file" type="file" 
     onchange="angular.element(this).scope().uploadFileChanged()"/> 

JS:

$scope.uploadFileChanged = function() { 
     $scope.$apply(function() { 
      $scope.uploadModel.active = true; 
      $scope.uploadModel.uploading = true; 
      $('#hiddenUploadForm').submit(); 
     }); 
    } 

Если вы планируете использовать файл ввода типа, это может быть работа, чтобы создать простую директиву, которая обрабатывает событие изменения без необходимости доступа таким образом.