Is there a way to create a textarea using AngularJS that can be populated either by typing, entering a URL, or uploading a plain text file? While I am able to load the file content into the variable linked to the textarea, I'm facing an issue where getting content from a URL changes the textarea but uploading a file does not. Here is my HTML setup:
<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">
<!-- This is the same variable linked to the textarea -->
</span>
</form>
<div class="checkoutside">
<!-- Variable content gets updated here, whether or not it's displayed in the textarea -->
content:<br>{{p2d.query.fasta}}
</div>
</div>
Here is the JavaScript code snippet:
var exeApp = angular.module('serverExe', [])
/* This directive loads content from a file
and updates the variable this.query.fasta.
However, the textarea itself doesn't get updated */
.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 };
// Getting content from URL
this.searchUNIP = function(query) {
url = 'http://www.uniprot.org/uniprot/'+this.query.uniac+'.fasta';
$http.get(url)
.success(function(data){
query.fasta = data;
}).error(function(data){
query.unierr = true;
});
};
});
I need assistance because I am stumped on how to resolve this issue.
Thank you!