Angularjs : 파일에서 텍스트 영역으로 읽는 내용 업데이트

Question

내용을 쓸 수 있지만 URL 또는 업로드 된 일반 텍스트 파일을 통해 채울 수있는 텍스트 영역을 만들려고합니다. AngularJS 만 있으면됩니다.
텍스트 영역에 연결된 동일한 변수에 파일 내용을로드 할 수 있지만 변수에 "get"을 포함하는 URL 내용을 가져 오는 동안 textarea의 내용이 지정된 텍스트로 자동 변경되므로 업로드 할 때 업데이트되지 않습니다. 파일.

<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> 

그리고 자바 스크립트 코드 :

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

지금, 나는 완전히이 작업을 수행하는 방법에 관해서는 분실하고 ...

감사 그래서, 우선, 내 HTML이
너 너무 많이.

Answer 1

아. 잘 모르겠어요하지만 당신은 this.query은 $ scope.query로 바꾸는 시도 http://jsfiddle.net/200eoamf/1