JavaScript 프로토 타입 상속의 관점에서 개념을 설명하고 싶습니다. 희망적으로 이해하는 데 도움이됩니다.

지시문의 범위를 정의하는 세 가지 옵션이 있습니다.

1. scope: false: 각도 기본값입니다. 지시문의 범위는 정확히 부모 범위 중 하나입니다 ( parentScope).
2. scope: true: Angular는이 지시문의 범위를 만듭니다. 스코프는 프로토 타입에서로 상속됩니다 parentScope.
3. scope: {...}: 격리 된 범위는 아래에 설명되어 있습니다.

를 지정하면을 scope: {...}정의합니다 isolatedScope. 은 isolatedScope에서하지 상속 특성을 수행 parentScope하지만, isolatedScope.$parent === parentScope. 다음을 통해 정의됩니다.

app.directive("myDirective", function() {
    return {
        scope: {
            ... // defining scope means that 'no inheritance from parent'.
        },
    }
})

isolatedScope에 직접 액세스 할 수 없습니다 parentScope. 그러나 때로는 지시문이와 통신해야합니다 parentScope. 그들은을 통해 의사 소통 @, =그리고 &. 문자를 사용하는 방법에 대한 주제 @, =및 &사용 시나리오에 대해 이야기하고 있습니다isolatedScope .

일반적으로 Modals와 같이 다른 페이지에서 공유하는 일부 공통 구성 요소에 사용됩니다. 격리 된 범위는 전체 범위를 오염시키지 않으며 페이지간에 쉽게 공유 할 수 있습니다.

기본 지시문은 다음과 같습니다. http://jsfiddle.net/7t984sf9/5/ . 설명 할 이미지는 다음과 같습니다.

@: 단방향 바인딩

@속성을에서 parentScope로 전달합니다 isolatedScope. 이 속성 one-way binding은 parentScope속성 값을 수정할 수 없음을 의미합니다 . JavaScript 상속에 익숙하면 다음 두 시나리오를 쉽게 이해할 수 있습니다.

• 바인딩 속성이 interpolatedProp예제 와 같이 기본 유형 인 경우 :를 수정할 수 interpolatedProp는 있지만 변경할 수 parentProp1는 없습니다. 당신의 값을 변경하는 경우에는 parentProp1, interpolatedProp(각 $ 소화 경우) 새 값으로 덮어 쓰게됩니다.

• 바인딩 속성이 다음과 같은 일부 객체 인 경우 parentObj: 전달 된 객체 isolatedScope가 참조이므로 값을 수정하면이 오류가 발생합니다.

  TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

=: 양방향 바인딩

=를 호출 two-way binding하면를 수정 childScope하면의 값도 업데이트 parentScope되고 그 반대의 경우도 마찬가지입니다. 이 규칙은 기본 요소와 객체 모두에 적용됩니다. 바인딩 유형을 parentObj로 =변경하면의 값을 수정할 수 있습니다 parentObj.x. 일반적인 예는 ngModel입니다.

&: 함수 바인딩

&지시문이 parentScope함수 를 호출하고 지시문 에서 값을 전달할 수 있습니다. 예를 들어 JSFiddle : & in 지시문 범위를 확인하십시오 .

지시문에서 클릭 가능한 템플릿을 다음과 같이 정의하십시오.

<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">

그리고 다음과 같은 지시문을 사용하십시오.

<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>

변수 valueFromDirective는를 통해 지시문에서 상위 컨트롤러로 전달 {valueFromDirective: ...됩니다.

참조 : 범위 이해

답변

           scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between
            parent and isolated scope. */
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        

scope : { nameValue : "@name" }

<my-widget name="{{nameFromParentScope}}"></my-widget>

scope : { nameValue : "=name" },
link : function(scope) {
  scope.name = "Changing the value here will get reflected in parent scope value";
}

<my-widget name="{{nameFromParentScope}}"></my-widget>

scope : { nameChange : "&" }
link : function(scope) {
  scope.nameChange({newName:"NameFromIsolaltedScope"});
}

<my-widget nameChange="onNameChange(newName)"></my-widget>