Angular 범위에서 범위를 사용하는 방법-JS 튜토리얼-php.cn

이 글은 주로 Angular 범위의 구체적인 사용법을 소개합니다. 편집자는 그것이 꽤 좋다고 생각하므로 이제 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요

Scope(스코프)는 HTML(뷰)와 JavaScript(컨트롤러) 사이의 링크입니다.

Scope는 사용 가능한 메서드와 속성이 있는 개체입니다.

Scope는 뷰와 컨트롤러에 적용될 수 있습니다.

$rootScope

모든 AngularJs 애플리케이션에는 기본적으로 루트 범위($rootScope)가 있습니다. 루트 범위는 최상위 수준에 있으며 다른 범위의 상위 범위 역할을 하며 전체 애플리케이션에 적용될 수 있습니다.

$scope

scope(scope)는 MVC 패턴의 Model에 해당하며 HTML(뷰)과 JavaScript(컨트롤러) 사이의 링크이며 뷰와 컨트롤러에 적용할 수 있습니다.

범위는 표현식이 실행되는 컨텍스트이며, 범위는 사용 가능한 메서드와 속성이 있는 개체이기도 합니다.

1. 변수의 값 획득 및 할당

 {{number}} 
 {{number}}  
 
 function parentCtrl($scope){ $scope.number = 1; } function childCtrl($scope){ }

로그인 후 복사

효과:

인터페이스에 두 개의 1이 표시되지만 버튼을 클릭하면 childCtrl 범위의 데이터가 변경되지만 parentCtrl의 데이터는 변경됩니다. 범위는 변경되지 않습니다

분석:

①childCtrl 범위는 parentCtrl 범위를 상속하므로(JavaScript의 프로토타입 체인 상속과 유사) childCtrl 범위는 parentCtrl의 콘텐츠에 액세스할 수 있습니다.
②버튼을 클릭하면 childCtrl 범위에 숫자 기본 유형 변수가 생성됩니다. childCtrl에 이미 기본 유형 변수가 있는 경우 프로토타입 체인에 액세스할 수 없습니다.

해결책:

①$parent를 사용하여 상위 범위의 변경 사항을 지정할 수 있습니다.

 {{number}} 
 {{number}}

로그인 후 복사

②참조 유형 변수를 사용하세요. 내부 및 외부 범위는 개체의 속성을 수정하는 경우 동일한 변수가 계속 참조됩니다.

 {{data.number}} 
 {{data.number}}  
 
 function parentCtrl($scope){ $scope.data.number = 123'; } function childCtrl($scope){ }

로그인 후 복사

ng-if, ng-repeat, ng-switch, ng-include 및 기타 명령도 새 범위를 생성합니다

2. Directive의 범위

.directive("myDirective", function () { return { restrict: "AE", scope: { name: '@myName', age: '=', changeAge: '&changeMyAge' }, replace: true, template: "" + "我的名字是：
" + "我的年龄是：
" + "在这里修改名字：
" + "" + " 
" }

로그인 후 복사

①scope: false

범위가 false로 설정된 경우 , 우리가 생성한 지시어는 상위 범위(실제로는 동일한 범위)와 동일한 모델 모델을 공유하므로 지시어에서 모델 데이터가 수정되면 상위 범위의 모델에 반영됩니다.

②scope: true

scope가 true로 설정되면 새 범위를 생성하지만 이 범위는 상속된 상위 범위입니다. 새로 생성된 범위는 새 범위 범위라는 것을 알 수 있지만 초기화 중에 속성은 상위 범위의 메서드는 새 범위를 채우는 데 사용됩니다. 상위 범위와 동일한 범위가 아닙니다.

3범위: {}

@ 이는 단일 항목 바인딩의 접두사 식별자입니다.

로그인 후 복사

특성 이름은 데이터의 단일 항목 바인딩이므로 두 단어를 연결하는 데 사용해야 합니다. {{}} 바인딩 데이터를 사용합니다.

= 양방향 데이터 바인딩 접두사 식별자입니다.

로그인 후 복사

양방향 데이터 바인딩은 = 접두사 식별자를 통해 구현되어야 하므로 {{}}를 사용할 수 없습니다.