Angularjs: update content read from file to textbox
I am trying to create a textbox where its content can be written, but it can also be populated via a url or an uploaded text file. It's all simple with AngularJS.
I can load the content of the file into the same variable associated with the textarea, but when I get the content of the url with "get" into the variable, it automatically changes the content of the textarea to the given text, it is not updated when the file is loaded.
So first, my HTML:
<div id="prot2dna" ng-app="serverExe" ng-controller="p2dCTRL as p2d">
<form novalidate>
<!-- TEXTAREA -->
<textarea class="form-control" ng-model="p2d.query.fasta"></textarea>
<!-- URL SEARCH -->
<div class="input-group">
<input type="text" class="form-control" ng-model="p2d.query.uniac">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="p2d.searchUNIP(p2d.query)">
Search
</button>
</span>
</div>
<!-- READ FILE -->
<span class="btn btn-default my-btn btn-block btn-file">
UPLOAD FILE
<input type="file" on-read-file="p2d.query.fasta">
<!-- Notice here is the same variable that the one linked to textarea -->
</span>
</form>
<div class="checkoutside">
<!-- Here I can see that the variable content is updated, regardless of the fact that it is displayed or not inside the textarea -->
content:<br>{{p2d.query.fasta}}
</div>
</div>
And the javascript code:
var exeApp = angular.module('serverExe', [])
/* THIS DIRECTIVE IS USED TO LOAD THE CONTENT FROM A FILE
IT ACTUALLY UPDATES THE VARIABLE this.query.fasta AND I CAN SEE THAT IN THE .checkoutside
DIVISION, BUT NOTHING HAPPENS INSIDE THE textarea */
.directive('onReadFile', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
console.log(attrs)
var model = $parse(attrs.onReadFile);
console.log(model)
var modelSetter = model.assign;
element.bind('change', function(e) {
scope.$apply(function(){
var reader = new FileReader();
reader.onload = function(){
modelSetter(scope, reader.result);
}
reader.readAsText(element[0].files[0])
});
});
}
};
})
.controller('p2dCTRL', function($http, $scope){
// QUERY
this.query = { 'fasta' : '', 'uniac' : '', 'fastafile': false, 'unierr': true };
//GET CONTENT THROUGH URL
this.searchUNIP = function(query) {
url = 'http://www.uniprot.org/uniprot/'+this.query.uniac+'.fasta';
$http.get(url)
.success(function(data){
// Assign content to variable -> this actually updates the content of the textarea
query.fasta = data;
}).error(function(data){
query.unierr = true;
});
};
});
Right now, I am completely lost on how to do this ...
Thank you very much.
+3
source to share
1 answer
Oh. The way to do it is to use $ parse like this:
var onFileReadFn = $parse(attrs.onReadFile);
var reader = new FileReader();
reader.onload = function() {
var fileContents = reader.result;
// invoke parsed function on scope
scope.$apply(function() {
onFileReadFn(scope, {
'contents' : fileContents
});
});
};
reader.readAsText(element[0].files[0]);
Full example here: http://jsfiddle.net/200eoamf/1
+5
source to share