AngularJs

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" />

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

注意：

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

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

Answer 1

当你使用纯 JS onchange 事件时，你超出了控制器范围，这就是为什么你必须调用 angular.element(this).scope() 返回范围并执行 uploadPhoto()方法。

尝试使用AngularJS的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 属性的值

AngularJs - Getting value of ng-src attribute in controller function

javascript

image

ng-image-compress