在Angular 1.5組件中處理回調函數

Question

我在處理Angular應用程序中的回調時遇到問題。

我想加載一個圖像，並將其讀取到base64 - 這工作正常，但我需要訪問它在我的filesSelect.onchange;功能外，以便解析它到我的數據庫。

我想設置e.currentTarget.result，我想保存爲我的範圍：this.imageVariable。

我有以下組成部分：

(function(){ 
angular 
    .module('app') 
    .component('addImage', { 
     bindings: { 
      fileread: '=' 
     }, 
     controller: function(getfirebase, $base64){ 
      //variables 
      this.base64Image = []; 
      this.imageVariable; 
      var imageElement = []; 

      // functions 
      this.userInfo = getfirebase; 
      this.update_settings = update_settings; 
      // this.filesChanged = filesChanged; 

      function update_settings(){ 
       this.userInfo.$save(); 
      }; 

      this.data = {}; //init variable 
      this.click = function() { //default function, to be override if browser supports input type='file' 
       this.data.alert = "Your browser doesn't support HTML5 input type='File'" 
      } 

      var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements 
      fileSelect.type = 'file'; 

      if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller 
       return; 
      } 

      this.click = function() { //activate function to begin input file on click 
      fileSelect.click(); 
      } 

      fileSelect.onchange = function() { //set callback to action after choosing file 
      var f = fileSelect.files[0], r = new FileReader(); 
      console.log(f); 
       r.onloadend = function(e) { //callback after files finish loading 
        e.currentTarget.result; 
       } 
       r.readAsDataURL(f); //once defined all callbacks, begin reading the file 

      }; 

     }, 
     controllerAs: 'addImage', 
     template: ` 
       <h3>Settings-pages</h3> 
       <card-list class="agform"> 
        <ul> 
         <li> 
          <p>Image preview</p> 
         </li> 
         <li> 
          <img ng-src="{{addImage.userInfo.image}}"> 
         </li> 
         <li> 
          <input type="text" ng-model="addImage.userInfo.name" name="fname" placheholder="Name"><br> 
          <input type="text" ng-model="addImage.userInfo.email" name="fname" placheholder="Email"><br> 
         </li> 
        </ul> 
        {{addImage.userInfo}} 
      </card-list> 
      <card-footer> 
       <button ng-click='addImage.click()'>click to select and get base64</button> 
       {{addImage.imageVariable}} 
       <button ng-click='addImage.update_settings()'></button> 
      </card-footer> 
      ` 
    }) 
})(); 

這也可能是簡單的，但我不得不花費大量時間試圖理解和解決這個問題。

Answer 1

我不能說我知道，從一個javascript角度angularjs ...，它會是在另一個變量保存this（me似乎是一個普遍的選擇），然後使用me.imageVariable = e.currentTarget.result;

controller: function(getfirebase, $base64){ 
    //variables   
    this.base64Image = []; 
    this.imageVariable; 
    var imageElement = []; 
    // ************** added line 
    var me = this; 

    // ... code removed for clarity 

    fileSelect.onchange = function() { //set callback to action after choosing file 
     var f = fileSelect.files[0], r = new FileReader(); 
     console.log(f); 
     r.onloadend = function(e) { //callback after files finish loading 
      // ******* save to imageVariable here 
      me.imageVariable = e.currentTarget.result; 
     } 
     r.readAsDataURL(f); //once defined all callbacks, begin reading the file 
    };