AngularJS 범위 (범위)
범위는 HTML (View)과 JavaScript (컨트롤러)의 링크입니다.
스코프는 사용 가능한 메소드와 속성이있는 객체입니다.
범위는보기 및 컨트롤러에 적용 할 수 있습니다.
범위를 사용하는 방법
AngularJS에서 컨트롤러를 만들 때 $ SCOPE 객체를 매개 변수로 전달할 수 있습니다.
AngularJS 인스턴스
컨트롤러의 속성은보기의 속성에 해당합니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "myctrl"> {{carname}} </div> <cript> var app = angular.module ( 'myApp'); app.controller ( 'myctrl', function ($ scope) {$ scope.carname = "volvo";}); {{}}의보기에 사용 된 이름에 해당합니다. </p> </body> </html실행 결과 :
볼보
컨트롤러에서 속성 이름 "Carname"을 만듭니다. {{}}의보기에 사용 된 이름에 해당합니다.
컨트롤러에 $ SCOPE 객체를 추가 할 때 View (HTML)는 이러한 속성을 얻을 수 있습니다.
보기에서 $ SCOPE PREFIX를 추가 할 필요가 없으므로 다음과 같은 속성 이름을 추가하면됩니다. {{Carname}}.
범위 개요
AngularJS 응용 프로그램 구성은 다음과 같습니다.
보기 (보기), 즉, HTML.
모델, 현재보기에서 사용 가능한 데이터.
컨트롤러, 즉 JavaScript 함수는 속성을 추가하거나 수정할 수 있습니다.
범위는 모델입니다.
범위는보기 및 컨트롤러에 사용할 수있는 속성 및 메소드가있는 JavaScript 객체입니다.
AngularJS 인스턴스
보기를 수정하면 모델 및 컨트롤러도 다음과 같이 업데이트됩니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "myctrl"> <input ng-model = "name"> 내 이름 내 이름은 {{name}} </div> <cript> var app = angular.module ( 'myapp', [)); app.controller ( 'myctrl', function ($ scope) {$ scope.name = "John do};};};}; 입력 상자의 값은 모델에 영향을 미치며 물론 컨트롤러의 해당 속성 값에도 영향을 미칩니다. </p> </body> </html>실행 결과 :
제 이름은 John Doe입니다
입력 상자의 값을 수정하면 모델에 영향을 미치며 물론 컨트롤러의 해당 속성 값에도 영향을 미칩니다.
범위 범위
현재 사용중인 범위를 아는 것이 매우 중요합니다.
위의 두 인스턴스에서는 하나의 스코프 범위 만 있으므로 처리하기가 비교적 간단합니다. 그러나 대규모 프로젝트에는 HTML Dom에 여러 범위가 있습니다. 현재 사용중인 범위에 해당하는 스코프를 알아야합니다.
AngularJS 인스턴스
NG-Repeat 지시문을 사용하면 각 복제는 현재 중복 객체에 액세스합니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "myctrl"> <ul> <li ng-repeat = "x names"> {{x}} </li> </ul> </div> <cript> var app = angular.module ( 'myApp'); App.Controller ( 'myctrl', function ($ scope) {$ scope.name = "" "" "" "" "" "" "" "" "" " "linus"];}); </script> </body> </html>실행 결과 :
각 <li> 요소는 문자열에 해당하는 현재 중복 객체에 액세스 할 수 있으며 변수 x로 표시됩니다.
루트 범위
모든 애플리케이션에는 NG-APP 지시문에 포함 된 모든 HTML 요소에 사용할 수있는 $ RootScope가 있습니다.
$ rootscope는 응용 프로그램 전체에서 사용할 수 있습니다. 각 컨트롤러의 스코프 브리지입니다. 루트 스코프로 정의 된 값은 각 컨트롤러에 사용할 수 있습니다.
AngularJS 인스턴스
컨트롤러를 만들 때 $ RootScope를 매개 변수로 전달하고 응용 프로그램에서 사용할 수 있습니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "myctrl"> 성은 {{lastname}} 가족 구성원 : <ul> <li ng-repeat = "x in names"> {{x}} {{lastname}} </li> </ul> </div> var app = angular.module ( 'myapp', []); app.controller ( 'myctrl', function ($ scope, $ rootscope) {$ scope.names = [ "emil", "tobias", "linus"]; $ rootscope.lastname = "refsnes";}); </script> <p> $ footscope는 내부 및 루프 외부에 액세스 할 수 있습니다. </p> </body> </html>실행 결과 :
성은 Refsnes 가족의 회원입니다.
$ rootscope는 루프 개체 내부와 외부에서 모두 액세스 할 수 있습니다.