AngularJS의 사용자 지정 지시문 범위

1. AngularJS의 사용자 지정 지시문 범위
2. AngularJS에서 Scope: False 또는 공유 범위 사용
3. AngularJS에서 Scope: True 또는 상속된 범위 사용
4. AngularJS에서 Scope : {} 또는 격리된 범위 사용
5. AngularJS에서 @ 또는 단방향 바인딩 사용
6. AngularJS에서 = 또는 양방향 바인딩 사용
7. AngularJS에서 & 또는 메서드 바인딩 사용

범위를 사용하면 AngularJS가 다른 객체가 실수로 객체를 변경할 수 없도록 할 수 있습니다. 개체의 새 복사본을 만들고 메모리에 저장하여 이를 수행합니다.

이 범위는 권한이 없는 사용자가 페이지의 개체에 액세스하는 것을 방지하는 보안 수단으로도 사용됩니다. 이 기사에서는 공유 범위 사용, 상위 범위 상속 및 격리된 범위와 같은 다양한 범위 관련 옵션 및 전술을 다룹니다.

AngularJS의 사용자 지정 지시문 범위

AngularJS 범위는 AngularJS의 필수 개념 중 하나입니다. 범위는 특정 변수 및 함수의 가시성을 결정하는 데 사용됩니다.

방향에 대해 이야기합시다. 애플리케이션에서 고유한 기능을 원하고 전체 애플리케이션 섹션에서 이를 활용하려면 코드 세트를 작성해야 합니다. Angular에서는 지시문이라고 합니다.

범위는 모든 지시문과 연결됩니다. 이 범위는 템플릿 내의 데이터 및 메서드에 액세스하는 데 사용됩니다.

지시문은 특별히 설정하지 않는 한 기본적으로 범위를 설정하지 않습니다. 결과적으로 지시문은 부모의 범위를 자신의 것으로 취급합니다.

디렉티브 정의 오브젝트로 정의된 구성 오브젝트를 AngularJS에 제공함으로써 디렉티브의 기본 범위를 변경할 수 있습니다. 주제에 대해 자세히 알아보겠습니다.

AngularJS에서 Scope: False 또는 공유 범위 사용

부모 범위와 동일한 단일 범위를 생성합니다. 이는 부모 범위에 대한 변경 사항이 지시문 범위에 반영되고 그 반대의 경우도 마찬가지임을 의미합니다.

자바스크립트:

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: false,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML 코드:

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

이 예에서 텍스트 상자의 이름을 변경하면 헤더 이름도 변경됩니다. DDO가 여기에 포함하지 않기 때문에 지시문은 상위 범위를 사용합니다.

결과적으로 지시문 내에서 변경한 사항은 상위 범위에도 적용됩니다. 여기를 클릭 위에서 언급한 코드의 작동을 확인하십시오.

AngularJS에서 Scope: True 또는 상속된 범위 사용

부모의 범위 대신 파생된 범위입니다. 지시문 범위를 수정하면 변경 사항이 컨트롤러 범위에 반영되지 않습니다.

그러나 상위 범위에 대한 수정 사항은 지시문 범위에 반영됩니다.

자바스크립트 코드:

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: true,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML 코드:

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

이 예에서는 상위 범위의 값이 화면에 표시됩니다. 그러나 텍스트 상자의 값을 수정하면 어떻게 될까요?

그러면 자식 범위만 변경됩니다. 상위 범위가 변경되지 않은 상태로 유지되었음을 나타냅니다.

여기를 클릭 위에서 언급한 코드의 작동을 확인하십시오.

AngularJS에서 Scope : {} 또는 격리된 범위 사용

격리된 범위는 가장 중요한 측면 중 하나입니다. 지시문은 여기에 새 범위 개체를 생성하지만 상위 범위는 상속하지 않습니다. 따라서 상위 범위를 알지 못합니다.

그러나 부모 범위에 연결하지 않은 경우 데이터를 어떻게 검색하고 편집할 수 있습니까? 대답은 엔터티의 속성을 DDO에 넣는 것입니다. 그러나 먼저 지시문에서 속성을 설정해야 합니다.

컨트롤러의 속성이나 메서드를 지시문에 연결하는 데 도움이 되도록 격리된 범위에서 세 개의 접두사를 사용합니다. 이것이 어떻게 작동하는지 살펴보겠습니다.

지시문이 DDO의 범위 속성에서 접두사를 발견하면 선언된 속성을 사용하여 지시문이 호출되는 HTML 페이지의 지시문 선언에서 이를 다시 확인합니다.

접두사 뒤에 다른 속성 이름을 지정하여 이름을 변경할 수 있습니다.

AngularJS에는 세 가지 유형의 접두사가 있습니다.

1. @ - 단방향 바인딩
2. = - 직접 모델 바인딩 / 양방향 바인딩
3. & - 메소드 바인딩

AngularJS에서 @ 또는 단방향 바인딩 사용

단방향 바인딩은 부모가 지시문에 반영된 속성을 통해 지시문 범위에 무언가를 보낼 때를 의미합니다. 그러나 지시문에 대한 변경 사항은 상위 항목에 반영되지 않습니다.

문자열 값은 @ 기호를 사용하여 전달됩니다.

자바스크립트 코드:

var app = angular.module("Demo",[]);


app.directive("myDirective", function(){
    return {

 scope: {
            name: '@'
        },
        template: "<div>Name :  {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML 코드:

<div ng-app="Demo">

    <div ng-controller="Hello">

        <div my-directive class='directive'></div>

    </div>
</div>
<div ng-app="Demo"></div>

여기를 클릭 위 코드의 라이브 데모를 확인하십시오.

AngularJS에서 = 또는 양방향 바인딩 사용

문자열이 아닌 지시문에 개체를 전달하는 데 사용됩니다. 이 엔터티는 부모 쪽과 지시문 쪽 모두에서 수정할 수 있습니다.

그래서 양방향이라고 합니다. 양방향 바인딩을 사용하려면 범위 대신 = 기호를 넣어야 합니다.

scope: {

 name: "="

}

AngularJS에서 & 또는 메서드 바인딩 사용

부모의 메서드를 지시문 범위에 연결하는 데 사용됩니다. 지시어의 부모 메서드를 호출할 때마다 이것을 사용할 수 있습니다.

현재 범위에 없는 함수를 호출하는 데 사용됩니다. 메서드 바인딩을 사용하려면 범위 대신 & 기호를 넣어야 합니다.

scope: {
     name: "&"
}

그게 다야; 여전히 혼란스럽다면 여기를 클릭하여 공식 문서를 읽으십시오.