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

Question

我正在尝试创建一个textarea，其中可以编写其内容，但也可以通过url或上传的纯文本文件填充。 所有这些只是使用AngularJS。
我能够将文件内容加载到链接到textarea的同一个变量中，但是，当获取带有“get”的URL内容时，变量会自动将textarea的内容更改为给定的文本，上传文件时它不会更新。
那么，首先，我的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>

和javascript代码：

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;
            });
    };
});

现在，我完全迷失了如何做到这一点......

非常感谢。

Answer 1

啊。 一种方法是使用$ parse，如下所示：

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]);

这里有完整的例子： http ： //jsfiddle.net/200eoamf/1