AngularJS 雙向綁定 中文件名，文件內容

通過ng-model獲取文件名，文件內容無效，這裏用的都是雙向綁定，但是雙向綁定時參數傳過去是undefined或者爲空 

<div  ng-controller="getFileCtrl" >  

           <input type="file"  ng-model="feupload" />{{feupload}}          

</div>

（1）如何獲取文件內容

在網上搜了搜，發現一種方法：onchange改變事件 

<div  ng-controller="getFileCtrl" >

            <input type="file"  ng-src={{files[0].name}} οnchange='angular.element(this).scope().fileChanged(this)'/>  

            <input type="text" ng-model="filename" value="filename" >

           <textarea ng-model="fileContent" value="fileContent" ><textarea>

</div> 

 （2）如何數據綁定文件內容，顯示到界面中

        Angular使用的是髒檢測，意味着當改變數據之後，你自己要做一些事情來觸發髒檢測，然後再應用到這個數據對應的DOM元素上

JS代碼：

$scope.fileChanged = function(ele){  

    $scope.files = ele.files;  

    var file = document.querySelector('input[type=file]').files[0];  

    var filename = $scope.files[0].name; 

   if(filename.length> 1 && filename ) {  

        var ldot = filename.lastIndexOf(".");  

        var type = filename.substring(ldot + 1);  //文件類型

        $scope.fileName=filename.slice(0,ldot);//文件名    

        //讀取文件內容  

         var reader =new FileReader();

         reader.readAsTest(file,"UTF-8");

            reader.οnlοad=function(evt){

                 $scope.fileContent=ev.target.result;

                 $scope.$apply(); //傳播Model的變化。//很重要，等文件內容讀出完以後，開啓髒檢測,這樣就將文件名字，內容綁定到界面上顯示

             }

     }

}