AngularJS - Responsive breakpoints break angular bindings (for slick)

roberto·2021년 5월 12일

angularjs 에서 slick.js 라이브러리 이용시
반응형 설정부분인
breakpoint 값이 변경시에
ng-click, ng-mouseenter 이벤트가 적용이 안되는 일이 발생


슬릭 페이지
slick : http://kenwheeler.github.io/slick/

breakpoint 를 사용한부분
(1700px , 1500px , 1300px 일때)

원인 :


슬릭에서 breakpoint 발생시
프로젝트의 slick.js 안의 Slick.prototype.refresh 가 호출되게된다.
이때 모든 돔요소에 바인딩 된 데이터들과 slick 설정을 초기화 시켜
이벤트가 호출되지 않게한다

해결방법 :

Slick.prototype.destroy 내부의
_.cleanUpRows(); 를 주석처리 해준다





what is cleanUpRows() ?

slick이 변하기 이전의 slick 스타일 정보를 삭제해주는 함수

참고 : https://github.com/kenwheeler/slick/issues/1227

profile
medium 으로 이전했습니다

0개의 댓글