AngularJS를 사용하며 따로 공부하지 않고도 알게 된 것들

1. $scope 함수로 정의 시 이를 호출하여 내부에서 스코프 변수값을 변경한 경우 바로 변경되나, 일반 함수(function)로 정의한 경우 값이 바로 변경되지 않는다.

 

2. 타 컨트롤러의 함수를 호출하거나 변수 값을 변경할 때는 다음과 같이 접근할 수 있다. 물론 타 컨트롤러의 스코프 함수/변수에 한해서 가능하다.

const otherCtrl = $("[data-ng-controller=otherCtrl]").scope();
$scope.apply(function(scope) {
	scope.otherCtrlFunction();
    scope.otherCtrlVar = '';
})

 

3. Apply하는 방식은 아래 두 가지 방법 모두 가능하다.

$scope.$apply(function() {
	$scope.val = 'a';
});

$scope.val = 'a';
$scope.$apply();

 

4. 하나의 로직을 통해 여러 화면을 나타내야 할 때 아래와 같이 ng-include를 사용할 수 있다.

<button type='button' ng-click='openDialog("a")'>Open Dialog</button>
<button type='button' ng-click='openDialog("b")'>Open Dialog</button>
<div id='dialog' ng-include='templateURL'></div>

<script>
let app = angular.module('commonModule', []);
app.controller('commonCtrl', [$scope, $rootScope, function() {
	$scope.templateURL = '';
    
    $scope.openDialog = function(type) {
    	$scope.templateURL = '../resources/template/' + type + '.html';
    }
}
]);
</script>

 

계속해서 내용을 추가할 예정이다.