강좌 & 팁
var app = angular.module("app", []);
app.controller("MyCtrl", function($scope, $http) {
console.log($scope);
console.log($http);
});
app.directive("myDirective", function() {
return {
restrict: "E",
link: function (scope, element, attrs) {
console.log(scope);
console.log(element);
console.log(attrs);
}
}
});<!DOCTYPE html>
<html>
<head>
<title>Binding</title>
</head>
<body>
<div ng-app="app">
<div ng-controller="MyCtrl">
<my-directive>
</my-directive>
</div>
</div>
<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>
브라우저를 열고, 개발자도구를 열어서 확인해보면 controller에서 찍은 $scope와 directive에서 찍은 scope와 같음을 알 수 있습니다. directive에서 별도의 scope를 정의하지 않으면 동일한 scope를 사용합니다.
main.js를 다음과 같이 수정합니다.
var app = angular.module("app", []);
app.controller("MyCtrl", function($scope, $http) {
console.log($scope);
console.log($http);
});
app.directive("myDirective", function() {
return {
restrict: "E",
scope: {},
link: function (scope, element, attrs) {
console.log(scope);
console.log(element);
console.log(attrs);
}
}
});
확인해보면 $scope와 scope가 다르게 찍히는 것을 확인할 수 있습니다. 이렇게 directive에서 scope를 정의해버리면 controller가 아닌 local scope를 다시 생성하게 됩니다.
그러면 directive에서 controller에 있는 scope를 사용하려면 어떻게 해야할까요?
다음과 같이 바꾸어봅시다.
var app = angular.module("app", []);
app.controller("MyCtrl", function($scope, $http) {
console.log($scope);
console.log($http);
});
app.directive("myDirective", function() {
return {
restrict: "E",
scope: {},
link: function ($scope, scope, element, attrs) {
console.log($scope);
console.log(scope);
console.log(element);
console.log(attrs);
}
}
});로그를 보면 $scope는 controller의 것을, scope는 directive의 것임을 확인할 수 있습니다.
이번에는 main.js를 이렇게 바꿔봅시다.
var app = angular.module("app", []);
app.controller("MyCtrl", function($scope, $http) {
console.log($scope);
console.log($http);
});
app.directive("myDirective", function() {
return {
restrict: "E",
scope: {},
link: function ($scope, element, scope, attrs) {
console.log($scope);
console.log(scope);
console.log(element);
console.log(attrs);
}
}
});
인자의 순서를 바꿨더니 element에 scope의 내용이 들어왔습니다. 이렇게 일반 이름은 순서에 따라서 의존성이 주입됩니다.
이번에는 이렇게 한번 바꿔보겠습니다.
var app = angular.module("app", []);
app.controller("MyCtrl", function($http, $scope) {
console.log($scope);
console.log($http);
});
app.directive("myDirective", function() {
return {
restrict: "E",
scope: {},
link: function ($scope, scope, element, attrs) {
console.log($scope);
console.log(scope);
console.log(element);
console.log(attrs);
}
}
이번에는 어떤가요? 인자의 순서가 바뀌었음에도 불구하고 $scope는 scope정보를 가지고 있습니다.
이렇듯이 $로 정의된 변수는 미리 정의된 angular-js의 것을 의존성 주입하도록 되어있습니다.
$scope라는 것을 바꾸고 싶다면 어떻게 해야할까요?
다음과 같이 해봅시다.
var app = angular.module("app", []);
app.controller("MyCtrl", ["$scope", "$http", function(스코프, 에치티티피) {
console.log(스코프);
console.log(에치티티피);
}]);
app.directive("myDirective", function() {
return {
restrict: "E",
scope: {},
link: function ($scope, scope, element, attrs) {
console.log($scope);
console.log(scope);
console.log(element);
console.log(attrs);
}
}
처음에 썼던 방식은 편의를 위해서 축약된 선언이고, 위와 같이 선언하는 것이 정석대로 하는 것입니다. 어떤 것을 의존성 주입을 할 것인지 먼저 정의하고 그 정의된 순서대로 인자에 의존성 주입이 되는 방식입니다.
여기까지 angular-js의 의존성 주입에 대해서 아주 간단하게 살펴보았습니다.
