AngularJs - 컨트롤러 기능에서 ng-src 속성의 값을 얻는 중

내 AngularJs 응용 프로그램에서 찾아보기 및 업로드 이미지 기능을 연구 중입니다. 압축 이미지에 ng-image-compress를 사용하고 있습니다. 사용자가 파일 찾아보기 대화 상자에서 이미지를 선택할 때마다 내 컨트롤러에서 ng-src 속성 값에 액세스해야합니다.AngularJs - 컨트롤러 기능에서 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" />

I 화상을 선택하면 uploadPhoto() 메소드를 호출하고 적절 IMG 태그에 화상 표시를 선택하지만 NG-SRC 값 OR {{image1.compressed.dataURL}} uploadPhoto에 액세스하려는 코드 위에 사용() 메소드를 호출합니다.

참고 :

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

내가 이것을하려고하면

, 내가 uploadPicture에 dataUrl 압축되었다()하지만 난 이런 유형의 처리를 원하지 않는다. 적절한 방법을 제안하십시오.

출처

2017-11-07 Umesh AP

일반 JS onchange 이벤트를 사용하는 경우 컨트롤러 범위를 벗어났습니다. 따라서 angular.element(this).scope()으로 전화하여 uploadPhoto() 메서드를 실행해야합니다.

<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에 액세스 할 수 있어야합니다 :

는 각도 JS의 ng-change 방법을 사용해보십시오.

'scope()'함수를 사용하여 JS 솔루션을 유지해야하는 경우 필요한 정보를 uploadPhoto() 함수의 인수로 전달하십시오 (가능한 경우). 뭔가 같이 :

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

또는 사용 JQuery와 : 여기

이 솔루션은 $scope.$watch을 사용

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

UPDATE : 여기

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

는 plunker은 다음과 같습니다 https://plnkr.co/edit/ArdhF6rPtREMCAzt7Eec?p=preview

plunker에 다른 범위 변수를 채우고 HTML에 사용합니다.

출처

2017-11-07 07:47:58 Andriy

답장을 보내 주셔서 감사합니다. 이미 두 가지 제안을 모두 시도합니다. 입력 유형 = 파일 인 경우에 ng-change가 실행되지 않으므로 일반 JS onchange() 이벤트를 사용했습니다. "onchange ="angle.element (this) .scope(). uploadPhoto (angular. 요소 (this) .scope() .image1.compressed.DataURL) "'결과는 ** Uncaught TypeError"Can not 정의되지 않은 "compressed"속성을 읽으십시오. ** 오직 'onchange = "angle.element (this) .scope(). uploadPhoto (angular. 요소 (this) .scope() .image1) "그런 다음 image1에 대해 정의되지 않은 값을 얻었습니다. 나는 실종 된 것이 무엇인지 이해하지 못합니까? –

'angular.element (this) .next ('img '). attr ('src ')'를 전달하려고 시도 했습니까? – Andriy

안녕 Andriy, 나는 이것을 시도하고 가능한 여러 가지 방법을 시도한다. ('img'). attr ('ng-src')'뿐만 아니라 angle.element (this) .next ('img'). attr ('src')' 컨트롤러에서 정의되지 않은 값을 받았습니다. 'angle.element ('img')를 사용하면 src 값을 제외한 img 태그의 세부 정보를 으로 표시합니다. ng-src를 ng-model 또는 범위 변수에 연결하고 컨트롤러에서 해당 변수에 액세스 할 수 있습니까? –

AngularJs - 컨트롤러 기능에서 ng-src 속성의 값을 얻는 중

답변

관련 문제