javascript - Angularjs: Updating contents read from file into textarea - Stack Overflow

admin管理员组

文章数量:1336111

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 =  '/'+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 pletely lost as to how to do this...

Thank you so much.

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/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 pletely lost as to how to do this...

Thank you so much.

• javascript
• angularjs
• textarea

Share Follow asked Dec 4, 2014 at 19:28 jaumebonetjaumebonet 2,25611 gold badge1717 silver badges1919 bronze badges 2

• 1 I'm not sure but have you tried changin this.query to be $scope.query? – Scott Commented Dec 4, 2014 at 19:53
• Yes, I though about that, as most "read file" examples work like that, so tried it... without any change. But maybe I was doing something wrong... – jaumebonet Commented Dec 5, 2014 at 12:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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/200eoamf/1

本文标签： javascriptAngularjs Updating contents read from file into textareaStack Overflow