Question

我正在尝试通过stateParam发送base-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;
    })();

}])

感谢您的时间。

编辑：

camera.html（Works）

<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

是的，所以有两种不同的方法来设置img的角度变量的来源，看起来你正在尝试同时做这两种方式，而且它们是＆＃39;重新取消对方。

第一种方法是在ng-src函数的文本叠加控制器中使用init()，只需这样做：

$scope.momentPicture = $stateParams.picture;

在您的模板中使用：

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

请记住momentPicture是$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"/>

如果第二种方式不起作用，可能是因为您在加载document.getElementById之前尝试访问DOM元素。

让我知道这是否有效！：）

通过stateprovider

1 个答案: