Framework/AngularJS에 해당하는 글들 10 Articles matched 목록이 없습니다. [AngularJS] 바인딩 완료 시점 AngularJS를 사용하면서 바인딩이 완료되는 시점에 어떤 로직을 수행시키고 싶은 경우가 생기기 마련인데요. 바인딩 완료 시점을 이벤트로 잡아주는 함수들을 정리해보려고 합니다. 데이터 바인딩 이전 시점 $(document).ready(function() { ... }); 데이터 바인딩 이후 시점 (바인딩 완료 시점) $(window).load(function() { ... }); 뷰 영역에서 저처럼 ng-include를 사용하는 경우에는 해당 템플릿이 로딩되는 시점에도 무엇인가 로직을 돌리고 싶은 경우가 생기는데요. 그 시점에 함수를 실행시키는 방법은 아래와 같이 2가지가 있습니다. ng-include 로딩 완료 시점 onload에 수행시킬 함수 또는 로직을 넣어주시면 됩니다. app.run(funct.. [AngularJS] $apply 이미 실행중 ($apply already in progress) AngularJS를 사용하다가 보면 어떤 경우에는 $scope.$apply 함수를 사용해주어야 위의 로직에서 변경한 변수들이 제대로 적용되는것을 볼 수 있습니다. 어떤 경우에 $apply함수가 자동으로 동작하지 않고 어떤 경우에 자동으로 동작하는지는 아직 파악이 되지 않지만 보통 directive에서 상속받은 scope의 변수들을 변경했을 경우 $apply 함수가 자동으로 동작하지 않는 것을 자주 봐왔습니다. 그런데 어느 날 directive를 구현하는데 어떤 경우에는 $apply 가 이미 동작중이라는 오류 메시지가 보이는 것 ($apply already in progress). 찾아보니 이 문제를 해결할 수 있는 방법이 있었습니다. 해결방법 if ($scope.$$phase !== '$apply' &&.. [AngularJS] AngularJS 주석 제거 AngularJS를 사용하다보면 개발자모드를 열었을 때 ng-repeat이라던지 ng-if를 사용했을 때 주석이 자동으로 남는 것을 볼 수 있는데요 이런 주석들은 불필요하기도 하고 서비스를 운영하는 입장에서 조금 허술해보일 수 있어서 제거하는 방법을 정리해보려고 합니다. AngularJS에서 구현이 되어 있기 때문에 간단하게 사용하면 됩니다. AngularJS 주석 제거 app.config(['$compileProvider', function ($compileProvider) { $compileProvider.debugInfoEnabled(false); }]); 위와같이 공통의 Controller 혹은 최상위 Controller에 config를 통해서 설정해줄 수 있습니다. 설정한 후에 개발자모드를 열어.. [AngularJS] a태그의 href에 unsafe가 붙을 때 해결방법 AngularJS를 사용하다가 a태그의 href 속성에 아무 동작을 시키지 않으려고 javascript:; 또는 javascript:void(0);를 적용할 때가 있습니다. 이 때 운영서버에 배포하고나니 링크가 동작을 안해서 살펴보면 href 속성에 설정해준 javascript:; 앞에 unsafe가 붙어져서 나와있는 경우가 있는데요 이런 경우 간단하게 아래의 config를 최상단 모듈에 설정해주면 됩니다. app.config(function($compileProvider){ // a태그의 href에 정규식 안에 있는 식을 사용했을 때 앞에 'unsafe:'가 붙지 않도록 하기 위함 // 'unsafe:'가 붙으면 Chrome브라우저에서는 문제없으나 IE나 다른 브라우저에서는 해당 a태그를 클릭 시 오류.. [AngularJS] 지정한 횟수만큼 ng-repeat 사용 AngularJS를 사용하다보면 ng-repeat의 생각보다 복잡함을 느낄때가 있습니다. JSTL을 사용하던 때에는 내가 원하는 횟수만큼 EL문을 반복하는 기능을 손 쉽게 구현 가능했다면 ng-repeat으로 구현하기 위해서는 어떻게해야할지 감이 안왔죠. 물론 방법은 많아요. 그 중에서 간단한 방법 몇가지를 소개하려고 합니다. Function (가장 간단한 방법) $scope.getArray = function(num) { return new Array(num); }; 함수를 통해서 비어있는 배열을 만들어서 아래와같이 View 영역에서 ng-repeat 구문안에서 호출하여 사용하시면 됩니다. AngularJS를 사용하다보면 ng-repeat의 생각보다 복잡함을 느낄때가 있습니다. JSTL을 사용하던 때에.. [AngularJS] 문자열은 제외하고 number filter를 적용할 수는 없을까? AngularJS를 사용하다 보면 여러가지 다양한 필터를 사용하게 되는데요 데이터 출력 관련한 필터 중에 기본적으로 number라는 필터가 있습니다. number 필터는 숫자를 보기 좋게 하여 출력해주는 필터로 예를들어 3자리 마다 콤마를 찍어준다거나 소수점은 기본적으로 3자리까지 반올림하여 보여줍니다. 하지만 데이터 타입이 문자열인 경우에는 number 필터를 거치면 아예 보이지 않죠. 그런데 사용하다가 보니 하나의 필터로 정수는 3자리마다 콤마를 찍어주고 소수점은 소수점 아래 자리를 모두 보여주고 문자열은 그대로 보여주는 필터가 필요하게 되었습니다. 기존의 number 필터를 그대로 이용하여 커스텀 필터를 만들어 보았습니다. 소스(Source) // Custom Number Filter (string.. [AngularJS] Copy, Extend, Merge 차이가 뭘까? AngularJS를 사용하다보면 객체를 복사하는 경우가 종종 있습니다. 보통은 angular.copy를 통해서 복사를 하는데요 운영 소스중에 angular.extend라는 것을 발견해서 차이가 뭔지 궁금해서 찾아보았습니다. 이번에 정리할 Copy, Extend, Merge는 모두 AngularJS에 내장되어있는 함수인데 영어단어 의미대로 객체 또는 배열을 복사, 확장, 병합하는 기능을 합니다. 각각의 차이점을 정리해보도록 하겠습니다. Copy (복사) angular.copy는 이미 사용하고 있던것으로 객체를 복사할 때 사용합니다. 복사가 필요한 경우는 원본 객체를 유지하되 수정이 필요할 경우가 있을 수 있습니다. var obj1 = { key: 'object1', value: 'test1' }; var .. [AngularJS] div 태그에 focusout 또는 blur 이벤트 주기 AngularJS를 사용하다 보면 input 태그가 아닌 div 혹은 어떤 영역의 바깥영역을 사용자가 클릭했을 때 이벤트를 주고 싶을 때가 있어요. 처음에는 자료가 안나와서 deep-blur라는 angularjs 모듈을 사용하다가 모듈이 내 마음대로 되지도 않고 조금 불안정한 느낌이 들어서 모듈을 제거하고 디렉티브로 구현된 방법이 있어서 바로 적용했습니다. deep-blur라는 모듈을 사용하는 것보다 훨씬 안정적이고 내 마음대로 로직을 수정할 수 있어서 훨씬 좋은 방법이라고 생각합니다. 소스 (Source) app.directive("outsideClick", ['$document','$parse', function( $document, $parse ){ return { link: function( $s.. 1 2
