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