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#/
$("#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() );
}
});