angular.js oninput 트러블슈팅

구현기능

스페이스에서 발생하는 배경음악 등의 볼륨을 조절할 수 있는 기능을 스페이스 설정창에 구현해야했다. v1(Angularjs)프로젝트에서 input의 range타입을 활용하여 해당 값을 앵귤러 컨트롤러 함수에 넘겨주려고 했다.

해당 input의 oninput으로 값만 바로 바인딩하면 해결될 것 같았고, 해당 부분에서 슬라이더의 값이 변경되는 순간마다 로그에 값이 잘 바인딩이 되는 것을 확인했다.

<input type="range" min="0" max="100" step="1" value="50" oninput="console.log(value)" />

oninput onchange 차이점

1. onchange 이벤트는 input 태그의 초점(focus)를 잃은 순간에 작동한다. 즉, input태그의 데이터를 입력하고 다른 곳을 클릭 했을 때 작동함.
2. oninput은 input, textarea 태그에서만 사용이 가능하다. onchange는 input, textarea, select 태그에서 사용 가능하다.

하지만

해당 input의 value 값을 angularjs 컨트롤러 내에 바인딩을 했어야했는데 oninput으로는 앵귤러 컨트롤러의 함수에서 값을 바인딩하는데 문제가 있었다. 그러하여 oninput을 angularjs에서 사용 가능한 속성이 있는지 찾아봤으나... ng-oninput 같은...? 아쉽게도 해당 부분은 찾지 못했고 StackOverFlow의 비슷한 문제를 참고하여 해결했다.

해결방법

To fire an event when the input changes, use ng-change. Also, you must define a ng-model.

<input ng-model="password" ng-change="passStrength(password)" />

https://stackoverflow.com/questions/36508578/oninput-not-working-in-angular-alternative

해당 해결책에 조금의 반박?같은 댓글로 onchange와 oninput의 차이점으로 이해 해당 해결이 적절하지 않다는 답변이 있었으나 해당 내용의 답변으로 ng-change를 얘기한 것이지 onchange가 아니고 해당 글쓴이의 질문에 대한 적절한 답변이 된다라는 글쓴이의 답글이 있었다.

해당 내용을 참고하여 아래와 같이 코드를 적용하고 바인딩하는 audioVolumeValue를 컨트롤러 스코프에 바인딩하여 변경마다 새로고침을 적용해주었다.

<input type="range" min="0" max="500" ng-model="audioVolumeValue" ng-change="changeAudioVolume()">

// 오디오 볼륨
$scope.changeAudioVolume = (): void => {
	//
	ctrl.mediaInfo.audioVolume = $scope.audioVolumeValue / 100;
	ctrl.refreshAudioVolume();
}

ambientVolumeValue도 마찬가지로 적용하고 해당 기능 구현을 마무리하였다.