Question

I have a simple angular form that I want to use to send an image to a remote server. I am binding the image src property to a photo pulled from device camera.

But when it's submitted, the image data is empty (ng-model is not binding to the img src attribute). I am having to separately add the image to the form object prior to submitting. Should i have to do that, or can I bind the image data properly to the form?

HTML

<form ng-submit="sendPost(post)">
  <img ng-src="{{imageURI}}" ng-model="$parent.post.image"/>
</form>

Controller

$scope.post = {
   image: ''
}

$scope.imageURI = //this will be populated with a base64 encoded image pulled from the device camera roll

$scope.sendPost = function(post) {
  //i want post.image to have the image data that was sent to the <img> tag via camera when the form is submitted
}

Answer 1

您的想法过于复杂，无需绑定ngModel，因为<img>不是Angular指令，而是简单的HTML标记。

选项1

如果您希望<form>通过Angular / AJAX提交，则表单中不需要<img> - 标记（或者根本只有<form>），但我我会留下它，因为我不确定你是否想要在提交之前显示图像。

选项2

如果您不想通过Angular提交，则需要<input type="hidden" ng-model="post.imageURI">，但您还需要action

上常用的<form>属性

返回选项1：将模型简化为$scope.post，包括HTML和Angular代码：

<强> HTML

<form ng-submit="sendPost()">
  <img ng-src="{{post.imageURI}}"/>
</form>

<强>控制器

$scope.post = {}

$scope.post.imageURI = //this will be populated with a base64 encoded image pulled from the device camera roll

$scope.sendPost = function() {
       // need to check here if $scope.post.imageURI is populated
    $http.post(
    ...
    data: $scope.post,
    ....
    );
       //i want post.image to have the image data that was sent to the <img> tag via camera when the form is submitted
}

Answer 2

在HTML中尝试从

更改ng-model

<img ng-src="{{imageURI}}" ng-model="$parent.post.image />

到

<img ng-src="{{imageURI}}" ng-model="post.image" />

它应该有用。

Angular form - img not binding to ng-model

2 个答案: