sourcecode

내 ng 모델이 꼭 점이 있어야 하위 $scope 문제를 피할 수 있습니까?

copyscript 2023. 10. 21. 10:39
반응형

내 ng 모델이 꼭 점이 있어야 하위 $scope 문제를 피할 수 있습니까?

https://github.com/angular/angular.js/wiki/Understanding-Scopes, 에 따르면 데이터 bind을 사용하는 것은 문제입니다.$scope:

범위 상속은 일반적으로 간단합니다. 그리고 종종 이런 일이 일어나고 있다는 것을 알 필요도 없습니다.하위 스코프 내부에서 상위 스코프에 정의된 프리미티브(예: 숫자, 문자열, 부울)에 대한 양방향 데이터 바인딩(예: 폼 요소, ng-model)을 시도할 때까지.대부분의 사람들이 기대하는 것처럼 작동하지 않습니다.

추천하는 것은

ng-model에 항상 '.'를 갖는 "best practice"를 따름으로써 프리미티브와 관련된 이 문제를 쉽게 피할 수 있습니다.


자, 이 규칙을 위반하는 아주 간단한 설정이 있습니다.

HTML:

<input type="text" ng-model="theText" />
<button ng-disabled="shouldDisable()">Button</button>

JS:

function MyController($scope) {
    $scope.theText = "";
    $scope.shouldDisable = function () {
         return $scope.theText.length >= 2;
    };
}

이거 진짜 안 좋아요?내가 어떻게든 아동용 스코프를 사용하기 시작했을 때 이것이 나를 엉망으로 만들 것인가요?


이런 걸로 바꿔야 하나요?

function MyController($scope) {
    $scope.theText = { value: "" };
    $scope.shouldDisable = function () {
         return $scope.theText.value.length >= 2;
    };
}

그리고.

<input type="text" ng-model="theText.value" />
<button ng-disabled="shouldDisable()">Button</button>

내가 최선의 방법을 따르도록?후자가 전자에 존재할 끔찍한 결과로부터 나를 구해줄 구체적인 예는 무엇입니까?

많은 것들이 새로운 스코프를 소개합니다.컨트롤러에서 탭을 추가할 수 있다고 가정해 보겠습니다. 첫 번째 탭은 실제 렌더링이고 두 번째 탭은 (실시간 미리 보기가 가능하도록) 형태입니다.

이에 대한 지침을 사용하기로 결정했습니다.

<tabs>
  <tab name="view">
    <pre>{{theText|formatInSomeWay}}</pre>
  </tab>
  <tab name="edit" focus="true">
    <input type="text" ng-model="theText" />
  </tab>
</tabs>

글쎄, 그거 아나?<tabs>독자적인 범위를 가지고 있고, 당신의 컨트롤러 하나를 깨뜨렸습니다! 그래서 당신이 편집할 때, angular는 js에서 다음과 같은 것을 할 것입니다.

$scope.theText = element.val();

프로토타입 체인을 통과하여 시도 및 설정하지 않습니다.theText부모님들께

에디트 : 분명히 말씀드리지만, 저는 "탭"을 예로 들 뿐입니다.가 "많은 것들이 새로운 범위를 도입한다"고 말할 때, 제 말은 ng-포함, ng-view, ng-switch, ng-controller 등입니다.

이 보기에는 아직 하위 범위가 없지만 하위 템플릿을 추가할지 여부를 알 수 없기 때문에 현재로서는 이 작업이 필요하지 않을 수 있습니다. 그러면 결국 수정될 수 있습니다.theText문제를 일으키고 있는 그들 자신을 말입니다.나중에 설계를 증명하려면 항상 규칙을 준수해야 합니다. 그러면 놀랄 일이 없습니다 ;).

M, A, B의 스코프가 있다고 가정해 보겠습니다. 여기서 M은 A와 B 모두의 부모입니다.

(A,B) 중 하나가 M의 범위에 쓰려고 하면 비원시적 유형에서만 작동합니다.그 이유는 비원시적 유형이 참조에 의해 전달되기 때문입니다.

반면에 원시적인 유형은 그렇지 않기 때문에 다음에 글을 쓰려고 시도합니다.theTextM의 범위에 M에게 쓰는 대신 A 또는 B의 범위에 각각 동일한 이름의 새로운 속성이 생성됩니다.A와 B 둘 다 이 속성에 의존하면 오류가 발생합니다. 왜냐하면 둘 다 다른 한 명이 무엇을 하고 있는지 모를 것이기 때문입니다.

언급URL : https://stackoverflow.com/questions/17178943/does-my-ng-model-really-need-to-have-a-dot-to-avoid-child-scope-problems

반응형