Angular 범위에서 범위를 사용하는 방법

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

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

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

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

$rootScope

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

$scope

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

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

1. 변수의 값 획득 및 할당

<p ng-controller="parentCtrl">
 <span>{{number}}</span>
 <p ng-controller="childCtrl">
  <span>{{number}}</span>
  <button ng-click="number = number +1">增加</button>
 </p>
</p>

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

효과:

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

분석:

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

해결책:

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

 <p ng-controller="parentCtrl">
  <span>{{number}}</span>
  <p ng-controller="childCtrl">
   <span>{{number}}</span>
   <button ng-click="$parent.number = number +1">增加</button>
  </p>
 </p>

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

 <p ng-controller="parentCtrl">
  <span>{{data.number}}</span>
  <p ng-controller="childCtrl">
   <span>{{data.number}}</span>
   <button ng-click="data.number = data.number +1">增加</button>
  </p>
 </p>
 
 function parentCtrl($scope){
  $scope.data.number = 123&#39;;
 }
 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: "<p class=&#39;my-directive&#39;>" +
  "我的名字是：<span ng-bind=&#39;name&#39;></span><br/>" +
  "我的年龄是：<span ng-bind=&#39;age&#39;></span><br/>" +
  "在这里修改名字：<input type=&#39;text&#39; ng-model=&#39;name&#39;><br/>" +
  "<button ng-click=&#39;changeAge()&#39;>修改年龄</button>" +
  " </p>"
}

①scope: false

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

②scope: true

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

3범위: {}

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

<p my-directive my-name="{{name}}"></p>

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

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

<p my-directive age="age"></p>

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

& 바인딩 함수 메서드의 접두사 식별자입니다.

<p my-directive change-my-age="changeAge()"></p>

속성 이름은 여러 단어를 연결하는 데 사용해야 합니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

react를 사용하여 메뉴 권한 제어를 구현하는 방법

props가 vue.js에서 매개변수를 전달하는 방법에 대한 자세한 해석

입력에서 동적 퍼지 쿼리를 구현하는 방법

위 내용은 Angular 범위에서 범위를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!