Understanding Scopes in AngularJS Custom Directives
AngularJS에서 지시문으로 작업할 때 공유, 상속 및 격리된 범위를 사용하는 방법을 살펴봅니다.
이 게시물에서는 AngularJS 사용자 지정 지시문의 다양한 종류의 범위에 대해 배웁니다. 먼저 지시문에 대한 개략적인 소개부터 시작한 다음 범위에 중점을 둡니다.
지시문
지시문은 AngularJS 1.X의 가장 중요한 구성 요소 중 하나이며 다음과 같은 목적을 가지고 있습니다.
- 기존 요소에 특별한 의미를 부여하기 위해
- 새 요소를 만들려면
- DOM을 조작하려면
ng-app, ng-controller 및 ng-repeat 외에도 AngularJS와 함께 제공되는 다음과 같은 많은 내장 지시문이 있습니다.
- ng-maxlength
- ng-minlength
- ng-pattern
- ng-필수
- ng-submit
- ng-blur
- ng-change
- ng-checked
- ng-click
- ng-mouse
- ng-bind
- ng-href
- ng-init
- ng-model
- ng-src
- ng-style
- ng-app
- ng-controller
- ng-disabled
- ng-cloak
- ng-hide
- ng-if
- ng-repeat
- ng-show
- NG 스위치
- ng-view
주로 지시문은 다음 작업 중 하나를 수행합니다.
- Manipulate DOM
- Iterate through data
- 이벤트 처리
- Modify CSS
- Validate data
- Perform Data Binding
Angular 팀에서 제공하는 많은 기본 제공 지시문이 있지만 사용자 지정 지시문을 직접 만들어야 하는 경우가 있습니다. 사용자 지정 지시문은 요소, 특성, 주석 또는 클래스로 만들 수 있습니다. 이 게시물에서는 아래 목록과 같이 매우 간단한 사용자 지정 지시문을 만들 수 있습니다.
MyApp.directive('helloWorld', function () { return { template: "Hello IG" }; });
사용자 지정 지시문을 만드는 동안 다음 사항을 기억해야 합니다.
- 지시문 이름은 카멜 케이스에 있어야 합니다.
- 뷰에서 지시문은 대시, 콜론, 밑줄 또는 이들의 조합을 사용하여 카멜식 대/소문자 이름을 구분하여 사용할 수 있습니다.
Scopes in Custom Directives
범위는 사용자 지정 지시문에 데이터를 전달할 때 장면에 들어갑니다. 범위에는 세 가지 유형이 있으며, 각각 이미지와 함께 몇 가지 유형이 설명되어 있습니다.
- Shared scope
- Inherited scope
- Isolated scope

아래 목록과 같이 scope 속성을 true로 설정하여 상속된 범위가 있는 사용자 지정 지시문을 만들 수 있습니다.
MyApp.directive('studentDirective', function () { return { template: " {{student.name}} is {{student.age}} years old !! ", replace: true, restrict: 'E', scope : true , controller: function ($scope) { console.log($scope); } } });
공유 및 상속된 범위
공유 범위와 상속된 범위는 비교적 이해하기 쉽습니다. 공유 범위에서 지시문은 포함된 컨트롤러와 범위를 공유합니다.
아래 목록과 같이 컨트롤러가 있다고 가정해 보겠습니다.
MyApp.controller("StudentController", [ "$scope", function ($scope) { console.log($scope); $scope.student = { name: "dj", age: 32, subject: ["math", "geography"], }; $scope.setGrade = function (student) { student.grade = "A+"; }; }, ]);
Next, let’s go ahead and create a custom directive:
MyApp.directive('studentDirective', function () { return { template: " {{student.name}} is {{student.age}} years old !! ", replace: true, restrict: 'E', controller: function ($scope) { console.log($scope); } } });
여기에서 뷰에서 studentdirective를 사용할 수 있습니다.
<div ng-controller="StudentController"> <student-directive> </student-directive> </div>
위의 스 니펫에서는 ng-controller 지시문이 StudentController로 설정되는 div 내부의 지시문을 사용하고 있습니다. 지시문에서 scope 속성에 대한 값을 설정하지 않았으므로 기본적으로 공유 범위 모드에서 작동합니다. 지시문은 컨트롤러 범위에 연결된 속성에 액세스할 수 있습니다. 지시문의 속성에 대한 변경 사항은 컨트롤러에 반영되며 그 반대의 경우도 마찬가지입니다. 또한 컨트롤러와 지시문 모두에 대해 scope id를 인쇄하고 있으며 두 ID는 동일해야 합니다.

공유 범위에는 한 가지 문제가 있습니다: 지시문에 명시적으로 데이터를 전달할 수 없습니다. 지시문은 동봉된 컨트롤러에서 데이터를 직접 가져옵니다.
상속된 범위에서 지시문은 컨트롤러의 범위를 상속합니다. 아래에서 상속된 범위를 가진 지시문을 만드는 방법을 살펴보겠습니다.
MyApp.directive('studentDirective', function () { return { template: " {{student.name}} is {{student.age}} years old !! ", replace: true, restrict: 'E', scope : true , controller: function ($scope) { console.log($scope); } } });
상속된 범위는 중첩된 사용자 지정 지시문에서 매우 유용합니다.
Isolated Scope
격리된 범위에서 지시문은 컨트롤러와 범위를 공유하지 않습니다. 지시문과 컨트롤러에는 모두 고유한 범위가 있습니다. 그러나 데이터는 세 가지 가능한 방법으로 지시문 범위에 전달될 수 있습니다.
- 데이터는 @ 문자열 리터럴을 사용하여 문자열로 전달할 수 있습니다
- 데이터는 = 문자열 리터럴을 사용하여 객체로 전달할 수 있습니다
- 3. 데이터는 & 문자열 리터럴 함수로 전달될 수 있습니다.

격리된 범위는 컨트롤러에 다른 데이터를 전달할 수 있기 때문에 매우 중요합니다. 더 잘 이해하기 위해 아래와 같은 컨트롤러가 있다고 가정해 보겠습니다.
MyApp.controller("ProductController", function ($scope) { $scope.product1 = { name: 'Phone', price: '100', stock: true }; $scope.product2 = { name: 'TV', price: '1000', stock: false }; $scope.product3 = { name: 'Laptop', price: '800', stock: false }; $scope.ShowData = function () { alert("Display Data"); } });
여기에서 볼 수 있듯이 우리는 세 가지 다른 제품을 가지고 있으며 다르게 전달하고 싶습니다.
데이터를 문자열로 전달
격리된 범위에서는 @ 문자열 리터럴을 사용하여 데이터를 문자열로 전달할 수 있습니다. 아래 목록과 같이 문자열을 입력 매개변수로 받아들이는 custom 지시문을 만들 수 있습니다.
MyApp.directive('inventoryProduct', function () { return { restrict: 'E', scope: { name: '@', price:'@' }, template: ' {{name}} costs {{price}} $ Change name ' }; });
위의 목록에서는 @ literal을 사용하여 두 개의 문자열 매개변수를 전달하고 있는데, 이는 문자열이 name 및 price 변수에 전달됨을 의미합니다. 지시문은 보기에서 사용할 수 있으며, 예제에서 지시문에서 name과 price에 대한 문자열 값을 전달하는 것을 볼 수 있습니다.
<div ng-controller="ProductController"> <h1>{{product1.name}}</h1> <inventory-product name="{{product1.name}}" price="{{product1.price}}"></inventory-product> </div>
응용 프로그램을 실행할 때 product1의 이름과 가격을 볼 수 있어야 합니다.

Change name 버튼을 클릭하면 지시문의 이름만 변경되고 격리된 범위로 인해 ProductController product1 개체는 영향을 받지 않습니다.

또한 격리된 범위의 데이터를 문자열로 전달할 때 단방향 방식으로 전달되므로 컨트롤러 범위의 변경 사항이 지시문에 반영된다는 점을 명심하십시오. 그러나 지시문의 변경 내용은 컨트롤러에 반영되지 않습니다.
Pass Data As an Object
격리된 범위에서는 = 문자열 리터럴을 사용하여 데이터를 객체로 전달할 수 있습니다. 아래 목록과 같이 객체를 입력 매개변수로 받아들이는 custom 지시문을 만들 수 있습니다.
MyApp.directive('inventoryProduct', function () { return { restrict: 'E', scope: { data: '=' }, template: ' {{data.name}} costs {{data.price}} $ Change name ' }; });
위의 목록에서는 = literal을 사용하여 하나의 object 매개변수를 전달하고 있습니다. 여기서 객체는 data 변수에 전달됩니다. 지시문은 아래 목록에 표시된 대로 보기에서 사용할 수 있습니다. 보시다시피 지시문에서 데이터 변수에 대한 개체 값을 전달하고 있습니다.
<div ng-controller="ProductController"> <h1>{{product1.name}}</h1> <inventory-product data="product1"></inventory-product> <h1>{{product2.name}}</h1> <inventory-product data="product2"></inventory-product> <h1>{{product3.name}}</h1> <inventory-product data="product3"></inventory-product> </div>
목록에 따라 지시문을 세 번 사용하고 세 개의 고유한 개체를 입력으로 전달합니다. 실행하면 아래와 같은 출력이 표시됩니다.

격리된 범위에서 개체를 전달하면 양방향 바인딩 모드에서 작동하며, 이는 지시문의 모든 변경 사항이 포함된 컨트롤러에 반영됨을 의미합니다. 아래 목록과 같이 product1을 두 번 전달한다고 가정해 보겠습니다.
<div ng-controller="ProductController"> <inventory-product data="product1"></inventory-product> <inventory-product data="product1"></inventory-product> </div>
응용 프로그램을 실행하면 동일한 개체가 지시문의 두 인스턴스에 전달됩니다.

Change name 버튼 중 하나를 클릭하면 동일한 개체가 전달되기 때문에 지시문 인스턴스의 이름이 모두 변경되고 개체 전달은 양방향 모드에서 작동합니다. 지시문의 모든 변경 사항은 둘러싸는 컨트롤러에 반영되며 그 반대의 경우도 마찬가지입니다.

Calling an External Function
동봉된 지시문에서 리터럴 변수 &를 사용하여 외부 함수를 호출할 수 있습니다. ProductController에서 언급했듯이 ShowData() 함수가 있습니다. 이 함수는 아래와 같이 지시문을 수정하여 custom 지시문에서 호출할 수 있습니다.
MyApp.directive('inventoryProduct', function () { return { restrict: 'E', scope: { data: '&', }, template: ' {{data.name}} costs {{data.price}} $ Change name ' }; });
여기서 지시문은 다음과 같이 뷰에서 사용할 수 있습니다.
<div ng-controller="ProductController"> <inventory-product data="ShowData()"></inventory-product> </div>
결론
이 게시물에서는 지시문에 대한 기본적인 이해부터 시작하여 범위로 이동하여 다음에 대해 배웠습니다.
- 공유 범위: 지시문 및 컨트롤러는 범위와 데이터를 공유합니다. 지시문에 데이터를 명시적으로 전달할 수 없습니다.
- 상속된 scope: 지시문은 컨트롤러의 범위를 상속합니다. 지시문에 데이터를 명시적으로 전달할 수 없습니다.
- 격리된 범위: 지시문 및 컨트롤러는 데이터와 범위를 공유하지 않습니다. 데이터를 문자열로 전달하거나 지시문에 명시적으로 객체를 전달할 수 있습니다.
이 게시물이 도움이 되었기를 바라며, 지시문을 사용하여 직접 작업한 후 HTML5 및 JavaScript UI 컨트롤 및 구성 요소의 고급 세트 인 Ignite UI 살펴보십시오. 지금 IgniteUI를 다운로드하여 무엇을 할 수 있는지 확인할 수 있습니다! 읽어 주셔서 감사합니다!
