Wie gebe ich die Bereichsvariablen von einem Controller in die $ ionicModal in ionischem Rahmen

Question

Ich baue eine app in Angular ionischen Framework Ich versuche, den Umfang variable cropImgSrc auf den modalen Anwendungsbereich passieren, aber es does'nt scheinen zu arbeiten. Hier ist mein Code

-Controller-Code

angular.module('myApp').directive('addprofile',function(){ 
return{ 
    restrict: 'E', 
    templateUrl: 'client/modules/add-profile-details/add-profile.html', 
    controllerAs: 'addProfileController', 
    controller: function($scope,$reactive,$ionicModal){ 
     var vm = this; 
     $reactive(this).attach($scope); 
     this.helpers({ 
      imgSrc: function(){ 
       return ''; 
      }, 
      cropImgSrc: function(){ 
       return ''; 
      } 
     }); 
     $ionicModal.fromTemplateUrl('client/modules/add-profile-details/crop-image-modal.html', { 
      scope: $scope, 
      animation: 'slide-in-up' 
     }).then(function(modal) { 
      vm.modal = modal; 
     }); 
     this.addAvatar = function(files){ 
      if (files.length > 0) { 
       var reader = new FileReader(); 
       reader.onload = function(e){ 
        $scope.$apply(function(){ 
         vm.cropImgSrc = e.target.result; 
         vm.modal.show(); 
       }); 
       }; 
       reader.readAsDataURL(files[0]); 
      } 
      else { 
       this.imgSrc = undefined; 
      } 
     }; 
    } 
} }); 

Und meine Vorlage ist wie folgt

<ion-view title="Crop Avatar"> 
<div class="modal"> 
    <div class="bar bar-header bar-positive"> 
     <h1 class="title">Your Avatar</h1> 
    </div> 
    <ion-content> 
     <img ng-src="addProfileController.cropImgSrc"> 
    </ion-content> 
</div> 

Kann jemand bitte leite mich, wo ich falsch gehe?

Answer 1

Zuerst ersetzen <img ng-src"addProfileController.cropImgSrc"> mit <img ng-src="addProfileController.cropImgSrc">

Answer 2

Da die Steuerung innerhalb modal mit $ Umfang liegt jetzt können Sie diese Zeile versuchen zu ändern vm.modal = modal; mit $ scope.modal = modal; Eine Option wäre auch, Protokolle zu drucken und die Werte zu überprüfen.

Answer 3

Bitte ersetzen Sie alle mit $ scope ‚vm‘ und den Modal-Code wie dieser es nur ein Tippfehler war

<ion-view title="Crop Avatar"> 
    <div class="modal"> 
     <div class="bar bar-header bar-positive"> 
     <h1 class="title">Your Avatar</h1> 
     </div> 
     <ion-content> 
     <img ng-src="{{cropImgSrc}}"> 
     </ion-content> 
    </div> 
</ion-view>