In my Angular view/form, I have an input file element that is being utilized with ng-upload. The code snippet looks like this:
<input id="img" type="file" name="image" onchange="angular.element(this).scope().setFile(this)">
<input id="imgname" type="hidden" value=""></div>
Since Angular doesn't natively listen for changes on input[type="file"], I came up with a workaround by creating a method that updates the hidden input field with the current filename. This allows me to perform validation on the second field.
There is another field in my form with a validator set up as follows:
<input ng-model="other" ng-change="chg()"/>
The issue arises when I try to trigger the validator $scope.chg() from the setFile() method. It seems like it's not operating within the same scope as expected - even though chg() runs, the validator appears to be in a different scope, and thereby doesn't enable my submit button. When I log output from chg(), it indicates a scope different from what I see on the view.
Interestingly, if I invoke the ng-change event by changing the regular input field named "other", it correctly picks up the changes and adjusts the submit button state accordingly.
I suspect the discrepancy is due to calling angular.element(this).scope().setFile(this) within the form instead of directly from a $scope-bound method. However, utilizing the $scope-bound method doesn't trigger as expected due to Angular's limitation with input type=file fields.
What steps can I take to resolve this situation?
All I need is to detect whether a file has been selected or not so I can enable/disable the submit button appropriately.