Question

我正在研究AngularJs应用程序中的浏览和上传图像功能。我使用ng-image-compress来压缩图像。每当用户从浏览文件对话框中选择图像时，我需要在控制器中访问ng-src属性的值。

<input id="File1" type="file" accept="image/*" image="image1" ng-image-compress ng-model="image2" 
        resize-max-height="800" resize-max-width="800" resize-quality="0.7" resize-type="image/jpg" 
        onchange="angular.element(this).scope().uploadPhoto()" />
<br /><br />
<img ng-src="{{image1.compressed.dataURL}}" class="thumb" />

使用上面的代码，当我选择图像时，在img标签中正确显示被调用的uploadPhoto（）方法和所选图像，但我想在uploadPhoto（）方法中访问ng-src值OR {{image1.compressed.dataURL}}。

注意：

 <button ng-click="uploadPicture(image1.compressed.dataURL)">Submit</button>

如果我试试这个，我在uploadPicture（）中得到了压缩的dataUrl，但我不想要这种类型的处理。请建议适当的方式。

Answer 1

当您使用普通JS onchange事件时，您不在控制器范围内，这就是您必须调用angular.element(this).scope()以返回范围并执行uploadPhoto()方法的原因。

尝试使用Angular JS的ng-change方法：

<input id="File1" 
       type="file" 
       accept="image/*" 
       image="image1" 
       ng-image-compress 
       ng-model="image2" 
       resize-max-height="800" 
       resize-max-width="800" 
       resize-quality="0.7" 
       resize-type="image/jpg" 
       ng-change="uploadPhoto()" />
<br /><br />
<img ng-src="{{image1.compressed.dataURL}}" class="thumb" />

现在，您应该可以在控制器或服务中访问$scope.image1.compressed.dataURL。

如果您必须使用'scope（）'函数继续使用JS解决方案，请尝试将所需信息作为参数传递给uploadPhoto()函数（如果可能）。类似的东西：

onchange="angular.element(this).scope().uploadPhoto(angular.element(this).scope().image1.compressed.dataURL)"

或使用jQUery：

onchange="angular.element(this).scope().uploadPhoto(angular.element(this).next('img').attr('src'))"

<强>更新

这是使用$scope.$watch的解决方案：

$scope.$watch('image1.compressed.dataURL', function(nVal) {
  if (nVal) {
    console.log('image1.compressed.dataURL', nVal);
  }
});

这是一个吸虫：https://plnkr.co/edit/ArdhF6rPtREMCAzt7Eec?p=preview

在plunker中我填充另一个范围变量并在HTML上使用它

AngularJs - 获取控制器函数中ng-src属性的值

1 个答案: