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

在插件中，我填充另一個作用域變量並在HTML上使用它