각도 범위
Angular로 구축 된 웹 응용 프로그램에서 범위의 개념은 전체적으로 있습니다. Angular View의 많은 지침은 NG-App, NG-Controller 등과 같은 범위를 만듭니다.이 범위는 컨트롤러 생성자를 작성할 때 주입하는 $scope (Angular1.2 이전 버전)입니다. 보기 모델의 개념입니다. 우리의 데이터 모델은 범위로 정의됩니다.
각도 범위 구덩이
Angular를 사용한 사람들은 프로세스를 거쳐야합니다. 즉, 처음에 초보자 였을 때, 그들은 단지 양방향 데이터의 바인딩을 보았습니다.
스코프 구덩이 1의 각도
그가 어떻게 직접 사용하기 시작하든 그는 한 번에 묶을 것입니다. 바인딩 후, 운이 좋으면 (각도 범위의 원리를 이해하는 오래된 새가 그것을 무시합니다), 양방향 바인딩은 예상대로 작동하기 시작합니다. 현재, 우리는 또한 우리가 너무 강력하여 "양방향 바인딩"을 너무 빨리 깨달을 수 있다고 생각합니다. 이는 들리지 않은 새로운 기능입니다.
그렇다면 왜 위의 말이 행운으로 인해 양방향 바인딩이 제대로 작동한다고 말하는가? Novices가 처음 Angular 학습을 시작했을 때, 그들은 튜토리얼을 읽고 비즈니스 요구를 달성하기 위해 코드를 변경했습니다. 처음에 공식 문서를 배울 수있는 플레이어가 있더라도 여전히 소수입니다. 따라서 방금 배운 Angular의 대부분의 친구들은 실제로 원칙을 이해하지 못하지만 이미 그것들을 사용하는 방법을 알고 있다고 생각합니다.
너무 많이 말한 후, 초보자가 범위에서 데이터 모델을 지정하고 양방향 방향으로 바인딩하기 시작하는 상황을 살펴 보겠습니다. 이 경우 위에서 언급 한 함정이 발생합니다. 먼저 코드를 살펴 보겠습니다.
// html <div ng-controller = "auterctrl"> <span ng-bind = "a"> </span> <div ng-controller = "innerctrl"> <span ng-bind = "a"> </span> <button ng-click = "a+1"> increment> </div> </div> // auterctrl ($ scope) {$ scope.a = 1;} 함수 innerctrl () {}위의 코드는 양방향 바인딩의 매우 간단한 예입니다. 페이지가로드되면 외부 DIV 및 내부 DIV에 1이 표시됩니다. 증분 버튼을 누르면 내부 1 만 2가됩니다. 계속 누르기 위해서는 동일합니다. 내부 번호 만 증가합니다. 현재 초보자는 종종 당황합니다. 합의 된 마법의 양방향 바인딩은 어떻습니까?
각도의 범위 구덩이
현재 아기는 약간 감정적이었습니다. 그는 stackoverflow 와 공식 문서를 걸었다. 마지막으로, 그는 A 속성 data.a 로 a를 쓰는 것과 같은 해결책이 실제로 있음을 발견했습니다.
// html <div ng-controller = "auterctrl"> <span ng-bind = "data.a"> </span> <div ng-controller = "innerctrl"> <span ng-bind = "data.a"> </span> <button ng-click = "data.a = data.a+1"> increment auterctrl ($ scope) {$ scope.data = {a : 1};} 함수 innerctrl () {}그런 다음 작동 할 수 있다는 것을 알았고 두 숫자가 모두 증가했습니다. 나는 양방향 구속력의 왕이었다. 그리고 나는 그것을 따로 던져서 특정 원칙에 관심을 갖지 않고 튜토리얼의 다음 부분을 계속 배웠다. 이것은 내가 처음 각도를 배웠을 때 실제로 나의 정신 여행입니다. 내부 원칙을 연구하기 전에 응용 프로그램을 수행하고 생산 환경에 배치하는 것이 정말 부끄럽습니다.
구덩이는 항상 채워야합니다
나는 너무 말도 안되는 말을했고 구덩이를 밟았습니다. 나는 구덩이 충전 단계에 들어갔다. 즉,이 구덩이는 객체로 작성된 속성에 의해 해결 될 수 있음을 의미합니다. 사실, 원칙을 알면 이해하기 쉽습니다. 각도의 내부 및 외부 범위는 JavaScript를 기반으로 한 프로토 타입 체인에 의해 상속되며, 프로토 타입 체인 상속 방법 만 사용됩니다. 일부 JavaScript 기본 사항을 가진 친구는 즉시 반응 할 수 있어야합니다. 서브 클래스 프로토 타입 객체의 참조 유형 값과 부모 인스턴스 객체의 참조 유형 값은 동일한 참조이며 기본 유형 값은 부모 객체의 기본 유형 값을 덮어 씁니다. 프로토 타입 체인 상속을 사용하면 호소 문제가 발생할 것이기 때문에 실제로는 조합 상속이 존재하는 이유입니다.
요컨대, 여기서는 다음과 같이 첫 번째 예를 볼 수 있습니다.
함수 outerctrl () {this.a = 1;} 함수 innerctrl () {} var outer = new auterctrl (); innerctrl.prototype = outer; var inner = new innerctrl (); inner.a = inner.a + 1; 여기서, 우리는 내부 컨트롤러 생성자의 프로토 타입 객체를 외부 스코프 객체로 설정하여 생성 된 내부 스코프 객체가 외부 객체 외부의 속성 A를 상속합니다. 이 속성은 기본 유형 값입니다. 내부 객체의 속성 A에 액세스 할 때, 내부 객체 자체에는 그러한 속성이 없기 때문에 프로토 타입 객체에서 찾아옵니다. 프로토 타입 객체에는 외부에 그러한 속성이 있으므로 반환 값은 문제가되지 않지만 내부 스코프 객체의 속성 A에 값을 할당하면 문제가 발생합니다. inner.a = inner.a + 1; 이 명령문은 실제로 A 속성의 값을 찾기 위해 위에서 언급 한 프로세스를 진행 한 다음 반환 된 값을 내부 범위 객체의 A 속성에 할당합니다. A 속성이 존재하지 않기 때문에 A의 기본 유형 값 속성이 생성되어 외부 스코프 객체의 A 속성을 차단 하고이 구덩이가 나옵니다.
따라서 기본 유형 값 속성을 참조 유형 값 속성으로 바꾸면 두 객체의 해당 속성이 참조 된 동일한 참조 유형 값이므로 문제를 해결할 수 있습니다.
요약
위의 모든 것은 각도에주의를 기울여야하는 함정에 관한 것입니다. 이 기사의 내용이 모든 사람에게 각도의 범위에 대해 배우는 데 도움이되기를 바랍니다.