I am facing an issue with a form in my ng-controller where it doesn't seem to update the properties in the controller as expected. After some research, I realized my misunderstanding of prototypal inheritance. Thanks to information from the internet and SO, I made changes to my code. However, it is still not functioning correctly and I am unable to determine the reason.
Here is the HTML snippet:
<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();
}
...
Despite changing uploadModel.active in a function and confirming it with a console.log, the display does not reflect the updated value. Could this still be due to prototypal inheritance? Note that uploadFileChanged is called when the input file control is changed.