AngularJS에서 AJAX를 불러온 후 코드를 실행하는 방법

Last Modified : 2017-12-05 / Created : 2017-07-19

3,599
View Count

주소 복사하기

AngularJS에서 AJAX 콜백을 받은 후에 코드를 수행하는 방법에 대하여 알아봅니다. 먼저 생각할 수 있는 부분은 아래와 같이 3가지가 있습니다.

Promise를 넘겨주는 방법
$watch 서비스를 사용하는 방법
ng-if를 사용하는 방법

위 세가지 방법을 사용하여 가능합니다.

# Promise를 사용하는 방법
ajax에서 전달받은 promise를 return 받아 .then()에서 코드를 수행하는 방법입니다. 코드는 명확하지만 다소 길고 복잡할 수 있습니다. 수행하는 ajax()가 포함될 함수를 적용할 디렉티브의 스코픙 추가하여야하는 번거로움이 있습니다.

# $scope.watch를 사용하는 방법
이 방법은 모델, 데이터의 값이 변하는 경우에 watch()를 사용하여 콜백함수를 실행하는 방법입니다. 만약 ajaxData를 불러온다면 다음과 같이 사용할 수 있습니다. 만약 callbackfunc()을 실행한다면...

$scope.watch("ajaxData", function(newValue, oldValue) {
  if (newValue) {
    // 새로운 값이 있는 경우에만 콜백을 실행함
    callbackfunc();
  }
}, true);

# ng-if를 사용하는 방법

이 방법은 약간의 꽁수처럼 보이지만 실제 가장 간단하게 사용할 수 있습니다. ajax를 통해 불러올 데이터 값을 ng-if 디렉티브에 추가합니다. 만약 ajax에서 ajaxData라는 데이터를 불러온다면 다음과 같이 사용합니다.

<custom-directive ng-if="ajaxData">
    // code here
</custom-directive>

위와같이 사용할 수 있습니다.

ajax delay

아래의 글도 찾고 계시지 않나요?

angularJS의 ngOptions 설정시 숫자만 사용하는 경우 방법

AngularJS에서 ng-bind-html로 html 문서 출력하는방법