내용으로 건너뛰기
Understanding Scopes in AngularJS Custom Directives

Understanding Scopes in AngularJS Custom Directives

AngularJS에서 지시문으로 작업할 때 공유, 상속 및 격리된 범위를 사용하는 방법을 살펴봅니다.

8min read

이 게시물에서는 AngularJS 사용자 지정 지시문의 다양한 종류의 범위에 대해 배웁니다. 먼저 지시문에 대한 개략적인 소개부터 시작한 다음 범위에 중점을 둡니다.

지시문

지시문은 AngularJS 1.X의 가장 중요한 구성 요소 중 하나이며 다음과 같은 목적을 가지고 있습니다.

  1. 기존 요소에 특별한 의미를 부여하기 위해
  2. 새 요소를 만들려면
  3. 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

범위는 사용자 지정 지시문에 데이터를 전달할 때 장면에 들어갑니다. 범위에는 세 가지 유형이 있으며, 각각 이미지와 함께 몇 가지 유형이 설명되어 있습니다.

  1. Shared scope
  2. Inherited scope
  3. 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

격리된 범위에서 지시문은 컨트롤러와 범위를 공유하지 않습니다. 지시문과 컨트롤러에는 모두 고유한 범위가 있습니다. 그러나 데이터는 세 가지 가능한 방법으로 지시문 범위에 전달될 수 있습니다.

  1. 데이터는 @ 문자열 리터럴을 사용하여 문자열로 전달할 수 있습니다
  2. 데이터는 = 문자열 리터럴을 사용하여 객체로 전달할 수 있습니다
  3. 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 개체는 영향을 받지 않습니다.

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

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>

결론

이 게시물에서는 지시문에 대한 기본적인 이해부터 시작하여 범위로 이동하여 다음에 대해 배웠습니다.

  1. 공유 범위: 지시문 및 컨트롤러는 범위와 데이터를 공유합니다. 지시문에 데이터를 명시적으로 전달할 수 없습니다.
  2. 상속된 scope: 지시문은 컨트롤러의 범위를 상속합니다. 지시문에 데이터를 명시적으로 전달할 수 없습니다.
  3. 격리된 범위: 지시문 및 컨트롤러는 데이터와 범위를 공유하지 않습니다. 데이터를 문자열로 전달하거나 지시문에 명시적으로 객체를 전달할 수 있습니다.

이 게시물이 도움이 되었기를 바라며, 지시문을 사용하여 직접 작업한 후 HTML5 및 JavaScript UI 컨트롤 및 구성 요소의 고급 세트 인 Ignite UI 살펴보십시오. 지금 IgniteUI를 다운로드하여 무엇을 할 수 있는지 확인할 수 있습니다! 읽어 주셔서 감사합니다!

데모 요청