Angularjs Image将值传递到$ scope模型

时间:2015-07-08 07:54:45

标签: javascript angularjs angularjs-directive angularjs-scope

我想问一下,所以我遇到了这个角度image compress function,它按照我想要的效果很好。我已成功实现它工作,但有1个问题,compress函数返回一个base64编码的图像,存储在本地$scope,只能在html页面本身调用,如果我我没有错。比如。

<td style="width: 15%">
    <div class="canvas-wrapper">
        <img class="canvas-image" ng-src="<%image1.compressed.dataURL%>"/></div>
</td>
<td>
     <input id="inputImage" ngf-select ng-model="statusData.file" ngf-multiple=false type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.5" resize-type="png" />
 </td>

为了让我获得压缩图像,我必须通过调用<%image1.compressed.dataURL%>来回显base64代码

现在我的问题是我应该如何将此值传递到我专门为存储此值而创建的$ scope模型中?我尝试过像

这样的事情

<%$scope.imageCache.data = image1.compressed.dataURL%>但它不起作用。

我需要将相关数据传递到我的自定义模块中,以便我可以对图像执行其他操作。

以下是代码工作代码的Demo

希望有人可以在这种情况下帮助我。

更新1:当用户点击图标时,发现临时作弊的解决方法是致电ng-click="image1 = null"

1 个答案:

答案 0 :(得分:0)

ng-src是一个评估其内容的指令。因此,您应该提供$scope

中的值
<img class="canvas-image" ng-src="image1.compressed.dataURL"/>

这将提供给出$scope.image1.compressed.dataURL中您有正确数据的数据。

所以不使用ng-src就是

<img class="canvas-image" src="{{image1.compressed.dataURL}}"/>

或使用修改后的插值符号

<img class="canvas-image" src="<%image1.compressed.dataURL%>"/>