Anglejs의 범위 범위에 대한 설명

이 글은 주로 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>

이 예에서는

1. Controller: MyCtrl, $scope를 참조하고 여기에 두 개의 속성과 메서드를 등록합니다.

2. $scope 개체: 보유 데이터 모델이 있습니다. name 속성, Greeting 속성(참고: sayHello() 메소드가 호출될 때 등록됨) 및 sayHello() 메소드를 포함하여 위 예에 필요합니다.

3. View: 입력 상자, 버튼 및 A 콘텐츠가 있습니다. 데이터를 표시하기 위해 양방향 바인딩을 사용하는 블록

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

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

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

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

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

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

ng-model의 이름에 따르면 범위에서 검색되며, 이미 값이 있는 경우 이 기본값을 사용하여 현재 입력 상자를 채웁니다.
사용자 입력을 수락하고 사용자가 입력한 문자열을 전달합니다. 이때 범위의 속성 값은 사용자 입력 값
2으로 실시간 업데이트됩니다.

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

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

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

초기 단계: 사용자가 클릭하기 전 버튼을 클릭하면 내용이 표시되지 않습니다.
값 단계: 사용자가 클릭한 후 이 표현식은 이 경우 범위와 컨트롤러는 동일합니다. 이 범위 아래의 인사말 속성은 현재 계산 단계에서 검색됩니다. 현재 범위를 확인한 다음 뷰를 렌더링하여 Zhang San이 바보임을 보여줍니다!
위의 두 가지 각도에서 예제 프로세스를 분석한 후 다음을 알 수 있습니다. 범위 개체와 해당 속성은 뷰 렌더링을 위한 유일한 데이터 소스입니다.

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

관련 기사:

gulp-uglify 압축 사용 후angularjs 실행 오류에 대한 해결 방법

Vue+ElementUI를 사용하여 양식 및 시각적 구성의 동적 렌더링 구현

웹팩 패키징 후 파일 크기에 대한 간략한 논의는 다음과 같습니다. 너무 큰 솔루션

iview 패키징 시 실제로 UglifyJs 오류 해결(자세한 튜토리얼)

vue를 사용하여 프로젝트를 패키징한 후 404를 새로 고치는 문제(자세한 튜토리얼)

위 내용은 Anglejs의 범위 범위에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!