angularJS Tip(일지 아닐지..)

1. $apply() is already progress 에러

 이번에 작업하면서 $apply()가 이미 실행되고 있다는 에러를 띄워봤다 -_-a

구글링하여 stack overflow나 블로그에 써있는 몇 개의 방법들 중 먹힌 것은 $timeout 방법이었다

$apply()에러가 발생한 경우는 ng-repeat을 통해 table을 생성하고 있었는데

ng-repeat 타겟에 요소를 추가하여 table을 추가 생성하는 경우,

table의 :last 요소가 추가 전 마지막 요소가 선택되는 것이 문제였다

var app = angular.module(); 
...
app.controller('ctrl', function( $scope, $timeout){ //timeout 사용
..
    $timeout( function(){
        //do something
    }, 100, false);
}
...

$apply( function(){ ... });도 당연히 안되서 timeout 안에 두니 table :last 요소를 제대로 선택하더라

2. ng-class에 css class 이름으로 -(하이픈, 대쉬)가 들어가는 경우

...

...

이렇게 작은 따옴표로 감싸주자

3. 해쉬태그 사용

 jquery ui의 tabs를 이용하면서 새로고침했을 경우 선택된 tab을 유지하도록 해야했다 ㅠ.ㅠ

www.test.com/a/ 에서 페이지를 띄웠다고 했을 때

location.hash = 'bla'; 하게되면

www.test.com/a#/bla 가 생겼다!

그리고 뒤로 누르면 반응이 없었다

이런저런 검색 끝에 해결한 방법은 아래와 같다

먼저, document.ready쪽에 빠져있는 tabs 초기화 부분을 angularjs controller 로 넣어주었다

$location 을 추가하여 $location.hash("b"); 로 해쉬 태그를 추가하고

페이지가 처음 로드됄 때 #/가 들어가도록 하였다 -> www.test.com/a#/

이렇게 하니 #/a 부분은 path로 지정되고 그 뒤로 해쉬태그 b가 들어가게 되었다  -> a#/#b

$("#div").tabs({
    select:function(e, ui){
         $timeout(function(){
               $location.hash( $(ui.panel).attr('id');
               $scope.$apply(); //탭 선택 시 id가 hash로 들어가려면 apply가 필요
          }, 100, false);
     }
     if( $location.hash() ){
          $("#div").tabs("select", "#"+$location.hash() );
     }
});

위와 같이 tabs 부분을 처리하였다.

timeout을 넣은 이유는 $apply()에러가 나서인데.. 아마도 탭 안에서 리스트를 로드하는 부분에서 $apply()가 들어가서 그랬던 것 같다