Angularjs：将从文件读取的内容更新为textarea

Question

I'm trying to create a textarea in which one can write its contents, but that can also be filled through an url or an uploaded plain text file. All of that just with AngularJS.
I am able to load the file content into the same variable linked to the textarea, but, while getting an URL content with "get" into the variable automatically changes the content of textarea to the given text, it does not update when uploading a file.
So, for starters, 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 as to how to do this...

Thank you so much.

Answer 1

Ah. A way to do this 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