web applications - On file reader's call back change corresponding input elements scope's property? -

with reference question file pick angular js, on file reader's on load want modify parent scope's property. consider

$scope.fileloaded = false; //initially $scope.file_changed = function(element, $scope) {   $scope.$apply(function(scope) {      var photofile = element.files[0];      var reader = new filereader();      reader.onload = function(e) {         $scope.fileloaded = true;  // intend do!         ...      };      reader.readasdataurl(photofile);  }); 

});

how achieve html:

<input ng-model="photo"    onchange="angular.element(this).scope().file_changed(this)"    type="file" accept="image/*" /> 

it fails every time error cannot set property 'fileloaded' of undefined.

couple of things.

1. use ng-change instead of onchange.
2. do in directive. don't want accessing elements in controller. can two-way bind fileloaded in directive can access in controller if you'd to, or can encapsulate functionality nice directive.

i wrote sort-of-similar directive awhile back, can check out here: https://github.com/jrowny/spritehero/blob/master/js/directives/file.js wrote before knew angular little messy. also, doesn't use filefield directly, invoked random link.

angular mess if don't master directives pretty on. otherwise it's you've got ladder few rungs provided.