angular custom directive ng-change

angular로 custom directive를 만들다 보면 template에서 종종 ng-change 를 사용하게 된다. 이 디렉티브의 콜백을 넘겨주려면 isolated scope에  & 로 넘겨준 뒤  ng-change 사용하듯이 쓰면 끝나는 간단한 작업이었지만, & 로 넘겨준 함수에 파라미터를 넣어서 보내주려니까 또 다른 이야기더라고.

directive가 내부적으로 사용하는 모델을 = 로 넘겨주고, 이 모델이 바뀌었을 때 실행될 함수를 & 로 넘겨준 상황. 여기서 놀랍게도 ng-redux를 사용하려니 이 함수의 인자로 모델을 넣어줘야 했고, directive 바깥에서 그 모델을 직접 넘겨주니 ng-change 사이클이 들어가기 전의 값이 evaluate되어 들어가서 원하는 대로 작동을 하지 않는 문제가 있었다. 이와 관련해서 angular github issue가 등록된 적이 있는데, 여기서 내린 결론은 ‘생각지도 못한 케이스지만, 의도한 대로 작동하는 것이 맞다’ 였다.

위 이슈 링크의 마지막 답변에 달린 plnkr도 좋지만 나는 이 링크를 참고했다. 코드 바로 밑에 bold로 강조된 부분이 핵심이다. 적당히 selectedValue 라는 변수로 넘겨줬으면, 이후에 directive template에서 이후에 {selectedValue: 대입되길_원하는_값} 과 같이 사용해주면 되는 것.

 

Leave a Reply