Anglejs의 범위 범위에 대한 설명
- 亚连원래의
- 2018-06-11 18:04:002561검색
이 글은 주로 Anglejs 학습의 범위에 대한 자세한 설명을 소개하고 있으니 참고하시기 바랍니다.
소개
범위는 HTML(보기)과 JavaScript(컨트롤러) 사이의 링크입니다.
Scope는 사용 가능한 메서드 및 속성과 함께 애플리케이션 데이터 모델을 저장하는 개체입니다.
Scope는 뷰와 컨트롤러에 적용될 수 있습니다.
범위는 컨트롤러와 웹 애플리케이션 보기 사이의 접착제입니다.
Controller--> Scope--> View(DOM)
Directive--> View(DOM)
AngularJS에서 컨트롤러를 생성할 때 $scope 객체를 매개변수로 전달할 수 있습니다:
<p ng-controller="myCtrl">
<h1>{{name}}</h1>
</p>
<script>
var app = angular.module('test', []);
app.controller('myCtrl', function($scope) {
$scope.name = "天下行走";
});
</script>출력 결과: Walking around the world
뷰에 해당하는 컨트롤러에 속성 이름 "name"을 생성합니다. {{ }}.
컨트롤러에 $scope 객체를 추가하면 뷰(HTML)가 이러한 속성을 얻을 수 있습니다.
뷰에서는 $scope 접두사를 추가할 필요가 없으며 {{name}}과 같은 속성 이름만 추가하면 됩니다.
AngularJS 애플리케이션은 다음과 같이 구성됩니다.
View(보기), 이는 HTML입니다.
모델(model), 현재 보기에서 사용할 수 있는 데이터입니다.
JavaScript 함수인 Controller(컨트롤러)는 속성을 추가하거나 수정할 수 있습니다.
범위는 뷰와 컨트롤러에서 사용할 수 있는 속성과 메서드가 포함된 JavaScript 개체입니다.
다른 예를 살펴보겠습니다.
<p ng-app="myApp" ng-controller="myCtrl">
输入你的名字：
<input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>greet</button>
</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "张三";
$scope.sayHello = function() {
$scope.greeting = $scope.name + '是个笨蛋!';
};
});
</script>이 예에서는
Controller: MyCtrl, $scope를 참조하고 여기에 두 개의 속성과 메서드를 등록합니다.
$scope 개체: 보유 데이터 모델이 있습니다. name 속성, Greeting 속성(참고: sayHello() 메소드가 호출될 때 등록됨) 및 sayHello() 메소드를 포함하여 위 예에 필요합니다.
View: 입력 상자, 버튼 및 A 콘텐츠가 있습니다. 데이터를 표시하기 위해 양방향 바인딩을 사용하는 블록
전체 예제에는 컨트롤러 시작의 관점에서 다음 두 가지 프로세스가 있습니다.
1 컨트롤러는 범위에 속성을 씁니다.
이름에 값을 할당합니다. 입력은 ng-model을 통해 양방향 바인딩을 구현하므로 이름 변경을 알 수 있으며 변경된 값을 뷰에 렌더링할 수 있습니다. view
2. 컨트롤러는 범위에 메서드를 작성하고 범위의 sayHello() 메서드에 값을 할당합니다. 버튼이 ng-click을 통해 이 메서드에 바인딩되기 때문입니다. 사용자가 버튼을 클릭하면 sayHello()가 호출되며 이 메서드는 범위의 name 속성을 읽고 접미사 문자열을 추가한 다음 이를 범위에 새로 생성된 인사말 속성에 할당합니다
전체를 보면 뷰 관점에서 본 예제 프로세스는 주로 다음과 같습니다. 세 부분:
1. 입력의 렌더링 로직: ng-model을 통해 뷰에 범위와 양식 요소의 양방향 바인딩을 표시합니다.
- ng-model의 이름에 따르면 범위에서 검색되며, 이미 값이 있는 경우 이 기본값을 사용하여 현재 입력 상자를 채웁니다.
- 사용자 입력을 수락하고 사용자가 입력한 문자열을 전달합니다. 이때 범위의 속성 값은 사용자 입력 값
- 2으로 실시간 업데이트됩니다.
버튼의 논리는 사용자 클릭을 허용하고 범위
에서 sayHello() 메서드를 호출합니다.3. {{인사말}}의 렌더링 로직
- 초기 단계: 사용자가 클릭하기 전 버튼을 클릭하면 내용이 표시되지 않습니다.
- 값 단계: 사용자가 클릭한 후 이 표현식은 이 경우 범위와 컨트롤러는 동일합니다. 이 범위 아래의 인사말 속성은 현재 계산 단계에서 검색됩니다. 현재 범위를 확인한 다음 뷰를 렌더링하여 Zhang San이 바보임을 보여줍니다!
- 위의 두 가지 각도에서 예제 프로세스를 분석한 후 다음을 알 수 있습니다. 범위 개체와 해당 속성은 뷰 렌더링을 위한 유일한 데이터 소스입니다.
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
위 내용은 Anglejs의 범위 범위에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!