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

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 标签中正确显示所选图像，但我想在 uploadPhoto() 方法中访问 ng-src 值或 {{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 上使用它