프로토타입 상속은 AngularJS 범위의 양방향 데이터 바인딩과 어떻게 작동합니까?

AngularJS에서 범위 프로토타입/프로토타입 상속의 미묘한 차이는 무엇입니까?

빠른 답변:

하위 범위는 일반적으로 프로토타입적으로 상위 범위에서 상속되지만 항상 그런 것은 아닙니다. 이 규칙의 한 가지 예외는 범위가 있는 지시문입니다: { ... } - 이는 프로토타입적으로 상속되지 않는 "격리" 범위를 생성합니다. 이 구성은 "재사용 가능한 구성 요소" 지시어를 생성할 때 자주 사용됩니다.

뉘앙스와 관련하여 범위 상속은 일반적으로 간단합니다... 양방향 데이터 바인딩이 필요할 때까지(예: 양식 요소, ng-model)을 하위 범위에 포함합니다. Ng-repeat, ng-switch 및 ng-include는 하위 범위 내부에서 상위 범위의 기본(예: 숫자, 문자열, 부울)에 바인딩하려고 하면 문제가 발생할 수 있습니다. 대부분의 사람들이 기대하는 대로 작동하지 않습니다. 하위 범위는 동일한 이름의 상위 속성을 숨기거나 숨기는 자체 속성을 갖습니다. 해결 방법은 다음과 같습니다.

1. 모델의 상위 개체를 정의한 다음 하위 개체에서 해당 개체의 속성을 참조합니다. parentObj.someProp
2. $parent.parentScopeProperty를 사용합니다(항상 그런 것은 아님). 가능하지만 가능한 경우 1.보다 쉽습니다)
3. 상위 범위에서 함수를 정의하고 하위 범위에서 호출합니다. 항상 가능)

새로운 AngularJS 개발자는 ng-repeat, ng-switch, ng-view, ng-include 및 ng-if가 모두 새로운 하위 범위를 생성한다는 사실을 인식하지 못하는 경우가 많습니다. 이러한 지시문이 포함될 때 종종 나타납니다. (문제에 대한 빠른 설명은 이 예를 참조하십시오.)

프리미티브와 관련된 이 문제는 항상 '.'을 갖는 "모범 사례"를 따르면 쉽게 피할 수 있습니다. 귀하의 ng 모델에서 – 3분 분량을 시청하세요. Misko는 ng-switch를 사용한 기본 바인딩 문제를 보여줍니다.

'.' 모델에서 프로토타입 상속이 작동하도록 보장합니다. 따라서 다음을 사용하세요.

L-o-n-g 답변:

프로토타입의 이해 상속

범위 상속을 논의하기 전에 프로토타입 상속을 이해하는 것이 중요합니다.

parentScope에 aString, aNumber, anArray, anObject 및 aFunction 속성이 있다고 가정합니다. childScope가 parentScope에서 프로토타입으로 상속되는 경우 다음과 같습니다.

[프로토타입 상속 다이어그램 이미지]

자식 범위에서 parentScope에 정의된 속성에 액세스하려고 하면 JavaScript는 먼저 다음을 찾습니다. 하위 범위에서 속성을 찾지 못한 다음 상속된 범위를 살펴보고 속성을 찾으세요. (parentScope에서 속성을 찾지 못한 경우 프로토타입 체인을 따라 루트 범위까지 계속됩니다.) 따라서 이것들은 모두 사실입니다:

childScope.aString === 'parent string'
childScope.anArray[1] === 20
childScope.anObject.property1 === 'parent prop1'
childScope.aFunction() === 'parent output'

다음과 같이 해보자:

childScope.aString === 'parent string'
childScope.anArray[1] === 20
childScope.anObject.property1 === 'parent prop1'
childScope.aFunction() === 'parent output'

프로토타입 체인은 참조되지 않으며 새로운 aString 속성이 childScope에 추가됩니다. 이 새로운 속성은 동일한 이름을 가진 parentScope 속성을 숨기거나 숨깁니다. 이는 아래에서 ng-repeat 및 ng-include를 논의할 때 매우 중요해질 것입니다.

[속성 숨기기 다이어그램 이미지]

그런 다음 다음과 같이 한다고 가정합니다.

childScope.aString = 'child string'

객체(anArray 및 anObject)가 childScope에서 발견되지 않기 때문에 프로토타입 체인이 참조됩니다. 개체는 parentScope에 있으며 속성 값은 원본 개체에서 업데이트됩니다. childScope에 새 속성이 추가되지 않습니다. 새 객체가 생성되지 않습니다. (JavaScript에서는 배열과 함수도 객체입니다.)

[프로토타입 체인 다이어그램을 따르는 이미지]

그런 다음 다음과 같이 한다고 가정합니다.

childScope.anArray[1] = '22'
childScope.anObject.property1 = 'child prop1'

프로토타입 체인은 참조되지 않으며 하위 범위는 동일한 이름을 가진 parentScope 객체 속성을 숨기거나 숨기는 두 개의 새로운 객체 속성을 얻습니다.

[이미지 더 많은 속성 숨기기 다이어그램]

Angular Scope 상속

경쟁자:

• 프로토타입 상속: ng- 반복, ng-include, ng-스위치, ng-컨트롤러, 지시어 범위 포함: true, transclude 포함 지시문: true.
• 범위 격리: 범위 포함 지시문: { ... }. 대신 "격리" 범위가 생성됩니다.

기본적으로 지시문은 새 범위(즉, 범위: false)를 생성하지 않습니다.

ng-include

우리가 컨트롤러:

childScope.anArray = [100, 555]
childScope.anObject = { name: 'Mark', country: 'USA' }

그리고 HTML에서:

$scope.myPrimitive = 50;
$scope.myObject = {aNumber: 11};

각 ng-include는 새로운 하위 범위를 생성하며, 이는 프로토타입적으로 상위 범위에서 상속됩니다.

[ ng-include 하위 범위 다이어그램 이미지]

입력(예: "77") 첫 번째 입력 텍스트 상자는 하위 범위가 동일한 이름의 상위 범위 속성을 숨기거나 숨기는 새로운 myPrimitive 범위 속성을 가져오도록 합니다.

[기본 다이어그램이 포함된 ng-include 이미지]

두 번째 입력 텍스트 상자에 "99"를 입력해도 새 하위 속성이 생성되지 않습니다. tpl2.html은 모델을 객체 속성에 바인딩하기 때문에 ngModel이 myObject 객체를 찾을 때 프로토타입 상속이 시작됩니다. 이는 상위 범위에서 해당 객체를 찾습니다.

[객체 다이어그램이 있는 ng-include 이미지]

모델을 기본 모델에서 모델로 변경하고 싶지 않은 경우 $parent를 사용하도록 첫 번째 템플릿을 다시 작성할 수 있습니다. object:

<script type="text/ng-template">

이 입력 텍스트 상자에 "22"를 입력해도 새 하위 속성이 생성되지 않습니다. 이제 모델은 상위 범위의 속성에 바인딩됩니다($parent는 상위 범위를 참조하는 하위 범위 속성이기 때문입니다).

[$parent 다이어그램이 포함된 ng-include 이미지]

ng-스위치

Ng-switch 범위 상속은 ng-include와 동일하게 작동합니다. 따라서 상위 범위의 기본 요소에 대한 양방향 데이터 바인딩이 필요한 경우 $parent를 사용하거나 모델을 개체로 변경한 다음 해당 개체의 속성에 바인딩하세요. 이렇게 하면 상위 범위 속성의 하위 범위 숨기기/섀도잉을 방지할 수 있습니다.

ng-repeat

Ng-repeat는 약간 다르게 작동합니다. 컨트롤러에

childScope.aString === 'parent string'
childScope.anArray[1] === 20
childScope.anObject.property1 === 'parent prop1'
childScope.aFunction() === 'parent output'

그리고 HTML에 다음이 있다고 가정합니다.

childScope.aString = 'child string'

각 항목/반복에 대해 ng-repeat는 프로토타입적으로 상위 항목에서 상속되는 새 범위를 생성합니다. 범위이지만 항목의 값을 새 하위 범위의 새 속성에 할당하기도 합니다(새 속성은 루프 변수 이름임). ng-repeat의 실제 Angular 소스 코드는 다음과 같습니다.

childScope.anArray[1] = '22'
childScope.anObject.property1 = 'child prop1'

항목이 기본 요소(myArrayOfPrimitives에서와 같이)인 경우 기본적으로 값의 복사본이 새 하위 범위 속성에 할당됩니다. 하위 범위 속성 값을 변경하면(예: ng-model을 사용하여 하위 범위 번호 사용) 상위 범위가 참조하는 배열이 변경되지 않습니다. 따라서 위의 첫 번째 ng-repeat에서 각 하위 범위는 myArrayOfPrimitives 배열과 독립적인 num 속성을 얻습니다.

[프리미티브 다이어그램이 포함된 ng-repeat 이미지]

이 ng-repeat (당신이 원하거나 기대하는 것처럼) 작동하지 않습니다. 텍스트 상자에 입력하면 하위 범위에서만 볼 수 있는 회색 상자의 값이 변경됩니다. 우리가 원하는 것은 입력이 하위 범위 기본 속성이 아닌 myArrayOfPrimitives 배열에 영향을 미치는 것입니다. 이를 달성하려면 모델을 객체 배열로 변경해야 합니다.

따라서 항목이 객체인 경우 원본 객체(사본이 아님)에 대한 참조가 새 하위 범위에 할당됩니다. 재산. 하위 범위 속성 값을 변경하면(즉, ng-model을 사용하여 obj.num 사용) 상위 범위가 참조하는 개체가 변경됩니다. 따라서 위의 두 번째 ng-repeat에는 다음이 있습니다.

[개체 다이어그램이 있는 ng-repeat 이미지]

(어디가 명확하도록 한 줄을 회색으로 표시했습니다. 진행 중입니다.)

예상대로 작동합니다. 입력

위 내용은 프로토타입 상속은 AngularJS 범위의 양방향 데이터 바인딩과 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!