UI 코드가 복잡해지면서 이벤트 리스너나 콜백에서 $scope에 할당한 데이터에 접근하는 식으로 구현을 했었다. 언뜻 보기에는 잘 동작하는 코드같았다. 하지만 다른 페이지로 이동했다가 돌아왔을 때 이상한 동작을 발견해서, 기록해놓기로 했다. 내가 작성하던 플랫폼은 Controller 로드 시 서버에서 받아온 데이터를, $scope에 할당하는 형식으로 구현되어있다. 이번에 구현한 기능은 이 기본적인 형식뿐만 아니라, 이미지를 계속해서 로드하면서 동시에 마우스 이벤트에 따라 이미지 위에 도형을 그려야했다. Canvas의 Background와 Flickering에 대한 삽질 기록에서 구현한 기능의 개선판이었다. Canvas의 Background와 Flickering에 대한 삽질 기록에서도 기술한 바 있듯 캔버..

2019/03/12 - [Programming/AngularJS] - [angularJS] ng-change/ng-click 내에서 ng-model로 바인딩 된 값을 변경할 시, UI에 변경된 값이 표시되지 않는 경우 이 글과 비슷한 내용이다. ng-change/ng-click 내에서 ng-model로 바인딩 된 값을 변경할 때의 문제이다. ng-options를 활용하여 select를 작성하는 경우, ng-options내에 선언한 배열이나 객체를 변경하면 값이 초기화된다. 이전에 언급했던 글과 비슷한 현상인데, 렌더링을 다시 하기 때문에 ng-options내의 가장 처음 값이 선택되어버리는 문제이다. 하지만 ng-model값은 변경되지 않으므로, ng-change가 발생하지도 않는다. UI를 클릭해서 이..

탭을 변경했을 때 데이터를 비교하여, 값을 서버로 전송해야 할 경우가 발생했다. BootStrap의 탭을 이용해서 UI를 그리고, 탭을 이동할 때 select로 함수를 바인딩한 후 Modal을 출력했다. 클릭한 탭이 표시된 상태로 Modal이 표시되고 있었다. Modal로 confirm을 구현하고나니 더더욱 이상해졌다. 탭을 변경하기 전에 데이터를 저장해야합니다. 변경된 데이터를 저장하시겠습니까? (Y/N)이라는 내용의 Modal이 화면상에 떠 있는데, 어둡게 표시된 화면의 저 편에 클릭한 탭의 내용이 표시되고 있다. 이러한 경유로 탭을 클릭하면 사용자에게 탭 이동여부를 묻고, 사용자의 선택에 따라 클릭한 탭의 내용을 표시하는 UI가 필요했다. 사용자가 OK를 눌렀을 때 Confirm Modal을 띄워봤..

angularJS 1.x에서 input이나 select를 사용하여 UI를 구현하다보면, 사용자가 특정 값을 선택했을 때 이전 값으로 되돌려야 하는 경우가 있다. 보통 이런 경우에는 ng-change나 ng-click을 이용해서 구현하게 된다. 물론 사용자에게 특정 값을 선택할 수 없는 이유를 알려주기 위한 방법은 많다. 툴팁을 이용할수도 있고, 페이지의 눈에 띄는 곳에 문구를 출력하는 방법도 있다. 다만 툴팁이나 문구의 경우 사용자가 동작을 멈추고, 툴팁이나 문구를 찾아야 한다. 사용자가 잘못된 값을 선택했을 때 다이얼로그를 띄우게되면, 사용자가 의도한 동작의 흐름에 따라 자연스럽게 잘못된 값임을 인지할 수 있다. 우선 이전 값을 가져오도록 하자. ng-change나 ng-click에서 Controlle..

임베디드 장비에 서버를 올려서, 장비의 설정을 변경할 수 있는 웹 어플리케이션을 서비스하고 있다. 그건 그렇다치고 몇 년 전부터 골치아픈 문제가 있었는데, ng-include를 사용해서 페이지를 로드했을 때 연결된 Controller가 두 번 호출되고 있었다. Controller가 두 번씩 호출되는 문제는 생각보다 골치아픈 문제였다. 장비에서 받아오는 데이터가 많으면 많을수록 Controller에서 데이터를 가공하는 코드도 복잡해지기 마련이었는데, Controller가 두 번 로드되면서 초기화하는 코드가 두 번 동작하는 것도 환장할 노릇이었다. 단순히 사용자에게 현재 장비의 설정값을 보여주고, 변경할 수 있게끔 하는 페이지라면 문제는 없었다. 하지만 특정 UI가 다른 UI의 값들과 의존관계가 있다거나, ..