Encountering an unusual issue with Angular. While I can trigger the desired action with ng-click, I must utilize onchange for other specific requirements.
Although my code works smoothly for other buttons that execute the same action, the upload button fails to update ng-class, despite the fact that scope.slideMenu is confirmed as true.
Additionally, I am seeking assistance in closing the menu once the user has selected an image/file.
Below is the code snippet:
HTML
<div class="app-slide-menu"
ng-class="{'app-menu-active': slideMenu}">
<form class="app-set-image-file-form">
<label class="app-file-input"
title="Upload Image">
<i class="icon-enter"></i>
<input type="file"
onchange="angular.element(this).scope().setImageFile(this)"
accept="image/*">
</label>
</form>
</div>
JS
scope.setImageFile = function (element) {
var reader = new FileReader();
// Converts the image to a data URL.
reader.readAsDataURL(element.files[0]);
scope.slideMenuToggle();
/**
* When the chosen image is selected, it triggers the onload function to pass the image to the whiteboardService.
* @param event - Saves the event of the input field to get the image's data URL.
*/
reader.onload = function (event) {
fabric.Image.fromURL(event.target.result, function (img) {
whiteboardService.uploadImageToCanvas(img);
});
// Resets the form that wraps around the file input to enable the user to add more than one of the same file.
// NOTE: This may affect other inputs if placed inside this form
$('.app-set-image-file-form').trigger('reset');
};
};
And the simple toggle JS:
scope.slideMenuToggle = function () {
scope.slideMenu = !scope.slideMenu;
};