AngularJS를 사용하면서 바인딩이 완료되는 시점에 어떤 로직을 수행시키고 싶은 경우가 생기기 마련인데요. 바인딩 완료 시점을 이벤트로 잡아주는 함수들을 정리해보려고 합니다.
데이터 바인딩 이전 시점
$(document).ready(function() {
...
});
데이터 바인딩 이후 시점 (바인딩 완료 시점)
$(window).load(function() {
...
});
뷰 영역에서 저처럼 ng-include를 사용하는 경우에는 해당 템플릿이 로딩되는 시점에도 무엇인가 로직을 돌리고 싶은 경우가 생기는데요. 그 시점에 함수를 실행시키는 방법은 아래와 같이 2가지가 있습니다.
ng-include 로딩 완료 시점
<div ng-include="'template.html'" onload="loaded = true"></div>onload에 수행시킬 함수 또는 로직을 넣어주시면 됩니다.
app.run(function($rootScope){
$rootScope.$on("$includeContentLoaded", function(event, templateName){
//...
});
});또는 controller 영역에서 $rootScope.$on("$includeContentLoaded") 이벤트를 $on 함수를 통해서 리스너로 등록해주시면 되는데요.
첫번째 방법은 여러개의 템플릿을 ng-include를 사용해서 로딩하는 경우에 각각 설정해주어야하는 번거로움이 있지만 각 템플릿이 로딩되는 시점에 각각 다른 로직을 태우고 싶다면 적합하겠죠, 반대로 controller에서 이벤트를 잡아서 수행하는 두번째 같은 방법은 여러개의 템플릿이던 한개의 템플릿이던 모두 하나의 리스너 함수를 통해서 처리가 됩니다.
어떤 템플릿이던 같은 로직을 수행시키기 위해선 첫번째 방법보다는 더 적합한 방법입니다. 하지만 로딩되는 템플릿에 따라서 로직을 분기하려면 인자로 받아오는 templateName을 통해서 분기할 수 있기는 하지만 로직이 복잡하다면 첫번째 방법을 사용하시는게 더 적합하겠죠?
이상 angularjs 데이터 바인딩 시점 및 ng-include 템플릿 로딩 시점에 대해 정리했습니다.
