stateproviderを介してbase64イメージを渡します。

Question

stateParamを介してベース64エンコードされたイメージを送信しようとしています。それは、他のルートに到達し、イメージタグを設定しようとしたときに動作しないように見えます（アイコンが見つからない小さな画像が表示されます）。

しかし、私は文字列を受け取り、経路を通してそれを送信することなくテスト画像タグを設定すれば、それは完全に機能します。

これは（するonSuccess一部）作品：

angular.module('app.cameraCtrl', []) 

.controller('cameraCtrl', ['$scope', '$stateParams', '$state', 
function ($scope, $stateParams, $state) { 

    $scope.momentPicture = document.getElementById('momentPicture'); 

    $scope.camera = function() { 
     console.log("CAMERA"); 
     navigator.camera.getPicture(onSuccess, onFail, 
      { quality: 50, //Quality of photo 0-100 
      destinationType: Camera.DestinationType.DATA_URL, //File format, recommended FILE_URL 
      allowEdit: false, //Allows editing of picture 
      targetWidth: 300, 
      targetHeight: 300, 
      correctOrientation: true 
     }); 

     function onSuccess(imageURI) { 
      var picture = "data:image/jpeg;base64," + imageURI; 
      $scope.momentPicture = document.getElementById('momentPicture'); 
      $scope.momentPicture.src = picture; 
      $state.go('textOverlay', {'picture': picture }); 
     } 

     function onFail(message) { 
      console.log('Failed because: ' + message); 
     } 
    }; 
}]) 

これにはない：

angular.module('app.textOverlayCtrl', []) 

.controller('textOverlayCtrl', ['$scope', '$stateParams', '$state', 
function ($scope, $stateParams, $state) { 

    (function init() { 
     $scope.momentPicture = document.getElementById('momentPicture'); 
     $scope.momentPicture.src = $stateParams.picture; 
    })(); 

}]) 

はお時間をいただき、ありがとうございます。

EDIT：

camera.html（ワークス）

<ion-view title="Camera" id="page4"> 
    <ion-content padding="true" class="has-header"> 
    <button id="camera-button8" ng-click="camera()" class="button button-positive button-block">Camera</button> 
    <button id="camera-button9" class="button button-assertive button-block">Upload</button> 
    <img id="momentPicture" ng-src = "test"></img> 
    </ion-content> 
</ion-view> 

textOverlay.html（動作しない）

<ion-content padding="true" class="has-header"> 
    <div style="margin: 0px; line-height: 250px; background-color: rgb(232, 235, 239); text-align: center;"> 
     <i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i> 
    </div> 
    <img id="momentPicture" ng-src="momentPicture"></img> 
    <form id="camera-form4" class="list"> 
     <label class="item item-input" id="camera-input1"> 
     <span class="input-label">Input</span> 
     <input type="text" placeholder=""> 
     </label> 
    </form> 
    <button id="camera-button7" class="button button-positive button-block">Text Overlay</button> 
    <div id="camera-button-bar1" class="button-bar"> 
     <button id="camera-button4" ng-click="camera()" class="button button-positive button-block">Submit</button> 
     <button id="camera-button6" ng-click="back()" class="button button-positive button-block button-outline">Cancel</button> 
    </div> 
    </ion-content> 
</ion-view> 

Answer 1

右、そうのソースを設定する2つの異なる方法があります角変数を持つimgと、あなたはそれらの両方をしようとしているように見えます、そして、彼らはお互いをキャンセルしています。

最初の方法は、ちょうどinit()機能であなたのテキストオーバーレイコントローラーになるようにng-srcを使用することであるだけで実行します。

$scope.momentPicture = $stateParams.picture; 

そして、あなたのテンプレートの使用中：

<img id="momentPicture" ng-src="{{momentPicture}}"/> 

はmomentPictureを覚えAであります$scope変数ですので、{{ }}を使用して補間する必要があります。また、base64の文字列を$scope.momentPicture.srcに設定する必要はありません。ちょっと混乱させるだけです。$scope.momentPicureに設定してください。

次のようにあなたがこれを行うことができ、他の方法は、次のとおりです。

テキストオーバーレイコントローラは、次のようになります。

angular.module('app.textOverlayCtrl', []) 

.controller('textOverlayCtrl', ['$scope', '$stateParams', '$state', 
function ($scope, $stateParams, $state) { 

    (function init() { 
     var momentPicture = document.getElementById('momentPicture'); //Doesn't really need to be a $scope variable 
     momentPicture.setAttribute('src', $stateParams.picture); 
    })(); 

}]) 

そして、あなたのテンプレートでng-srcをドロップ：

<img id="momentPicture"/> 

2番目の方法が機能しない場合は、document.getElementByIdがロードされる前にDOM要素にアクセスしようとしている可能性があります。

この機能が動作しているかどうかを教えてください。 :)