Anglejs의 범위 범위에 대한 설명-JS 튜토리얼-php.cn

Anglejs의 범위 범위에 대한 설명

亚连

풀어 주다： 2018-06-11 18:04:00

원래의

2550명이 탐색했습니다.

이 글은 주로 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(&#39;test&#39;, []);
app.controller(&#39;myCtrl&#39;, 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=&#39;sayHello()&#39;>greet</button>  
</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.name = "张三";
  $scope.sayHello = function() {
    $scope.greeting = $scope.name + &#39;是个笨蛋!&#39;;
  };
});
</script>

로그인 후 복사

이 예에서는

Controller: MyCtrl, $scope를 참조하고 여기에 두 개의 속성과 메서드를 등록합니다.
$scope 개체: 보유 데이터 모델이 있습니다. name 속성, Greeting 속성(참고: sayHello() 메소드가 호출될 때 등록됨) 및 sayHello() 메소드를 포함하여 위 예에 필요합니다.
View: 입력 상자, 버튼 및 A 콘텐츠가 있습니다. 데이터를 표시하기 위해 양방향 바인딩을 사용하는 블록

전체 예제에는 컨트롤러 시작의 관점에서 다음 두 가지 프로세스가 있습니다.

1 컨트롤러는 범위에 속성을 씁니다.

이름에 값을 할당합니다. 입력은 ng-model을 통해 양방향 바인딩을 구현하므로 이름 변경을 알 수 있으며 변경된 값을 뷰에 렌더링할 수 있습니다. view

2. 컨트롤러는 범위에 메서드를 작성하고 범위의 sayHello() 메서드에 값을 할당합니다. 버튼이 ng-click을 통해 이 메서드에 바인딩되기 때문입니다. 사용자가 버튼을 클릭하면 sayHello()가 호출되며 이 메서드는 범위의 name 속성을 읽고 접미사 문자열을 추가한 다음 이를 범위에 새로 생성된 인사말 속성에 할당합니다

전체를 보면 뷰 관점에서 본 예제 프로세스는 주로 다음과 같습니다. 세 부분:

1. 입력의 렌더링 로직: ng-model을 통해 뷰에 범위와 양식 요소의 양방향 바인딩을 표시합니다.

버튼의 논리는 사용자 클릭을 허용하고 범위

에서 sayHello() 메서드를 호출합니다.

3. {{인사말}}의 렌더링 로직