$ angularJs kapsam değişkenlerimi güncelleştirmiyor uygula

Question

Şu ana kadar meteor altyapısını kullanarak açısal bir iyonik uygulama yapıyorum, ancak kapsamımı güncelleştirmeyen $ apply yöntemini kullanarak kapsamımı güncellemeye çalışıyorum, işte benim kodum . Görüntüyü yükledikten sonra kullanıcı daha spesifik olmak için, fileReader API kullanarak görüntüyü base64 nesnesine dönüştüren addAvatar işlevini çağırır. Sırasıyla, $ uygulamak için ama geçerli değil editProfileController.cropImgSrc için atanmış olmalıdır.

Ben editProfileController.cropImgSrc

Şablon (yönerge)

<ion-view view-title="Profile Edit"> 
<div class="bar bar-header bar-positive"> 
    <h1 class="title">edit your profile</h1> 
</div> 
<ion-content overflow-scroll="true" class="has-header"> 
    <h4 style="color:#212121;font-family: 'proxima',sans-serif;">Edit profile</h4> 
    <div class="row row-center"> 
     <div class="col col-25"> 
      <div> 
       {{editProfileController.cropImgSrc}} 
      </div> 
     </div> 
     <div class="col"> 
      <div class="button button-outline button-positive" ngf-select 
        ngf-change="editProfileController.addAvatar($files)" 
        ngf-multiple="false" ngf-allow-dir="false" ngf-accept="'image/*'" 
        ngf-drop-available="false"> 
       edit my display picture 
      </div> 
     </div> 
    </div> 
    <div class="list"> 
     <div class="list"> 
      <label class="item item-input"> 
       <span class="input-label">your name</span> 
       <input type="text" ng-model="editProfileController.profile.name"> 
      </label> 
      <label class="item item-input"> 
       <span class="input-label">your birthday</span> 
       <input type="date" ng-model="editProfileController.profile.birthday"> 
      </label> 
      <label class="item item-input item-select"> 
       <div class="input-label"> 
        Gender 
       </div> 
       <select ng-model="editProfileController.profile.gender"> 
        <option selected>Female</option> 
        <option>Male</option> 
        <option>Others</option> 
       </select> 
      </label> 
     </div> 
     <h5 style="color:#212121;font-family: 'proxima',sans-serif;" class="padding">Add a short Bio about you, Keep it interesting and simple!</h5> 
     <label class="item item-input"> 
      <span class="input-label">Bio</span> 
      <input type="text" placeholder="I am a storm trooper, fighting at star wars." ng-model="editProfileController.profile.bio"> 
     </label> 
     <br> 
     <div class="row padding"> 
      <div class="col"> 
       <button class="button button-outline button-positive button-block"> 
        save my profile 
       </button> 
      </div> 
     </div> 
    </div> 
</ion-content> 

Kontrolör kapsamını güncellemeye çalışıyorum

angular.module('appName').directive('profileedit',function(){ 
return{ 
    restrict: 'E', 
    templateUrl: 'client/modules/profile-edit/profile-edit.html', 
    controllerAs: 'editProfileController', 
    controller: function($scope,$reactive){ 
     $reactive(this).attach($scope); 
     this.helpers({ 
      cropImgSrc: function(){ 
       return ' '; 
      } 
     }); 
     this.addAvatar = function(files){ 
      if (files.length > 0) { 
       var reader = new FileReader(); 
       reader.onload = function(e) { 
        $scope.$apply(function(){ 
         this.cropImgSrc = e.target.result; 
        }); 
       }; 
       reader.readAsDataURL(files[0]); 
      } 
      else { 
       this.cropImgSrc = undefined; 
      } 
     }; 
    } 
} 

});

bu kontrol definetion üzerinde vm eklemek Çözelti, var vm = Bu;

Answer 1

this içeriği $scope.$apply yöntem çağrısı içinde değiştiğinden hata oluşur.

bakınız: this context within an event handler

Basit düzeltme kontrolörün tanımının üstündeki bir değişkene this bağlamını kaydetmek olacaktır:

controller: function($scope,$reactive){ 
    // save context of this in a variable 
    var vm = this; 
    $reactive(this).attach($scope); 
    this.helpers({ 
     cropImgSrc: function(){ 
      return ' '; 
     } 
    }); 
    this.addAvatar = function(files){ 
     if (files.length > 0) { 
      var reader = new FileReader(); 
      reader.onload = function(e) { 
       $scope.$apply(function(){ 
        // vm still refers to the controller here 
        vm.cropImgSrc = e.target.result; 
       }); 
      }; 
      reader.readAsDataURL(files[0]); 
     } 
     else { 
      this.cropImgSrc = undefined; 
     } 
    }; 
}