Angular 범위에서 범위를 사용하는 방법
- 亚连원래의
- 2018-06-21 14:37:122020검색
이 글은 주로 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';
}
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='my-directive'>" +
"我的名字是：<span ng-bind='name'></span><br/>" +
"我的年龄是：<span ng-bind='age'></span><br/>" +
"在这里修改名字：<input type='text' ng-model='name'><br/>" +
"<button ng-click='changeAge()'>修改年龄</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>
속성 이름은 여러 단어를 연결하는 데 사용해야 합니다.
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
props가 vue.js에서 매개변수를 전달하는 방법에 대한 자세한 해석
위 내용은 Angular 범위에서 범위를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!