1.
scope (http://code.angularjs.org/1.0.0/docs/api/ng.$rootscope.scope)는 응용 프로그램 모델을 가리키는 객체입니다. 또한 표현의 실행 컨텍스트입니다 (http://www.cnblogs.com/lclao/archive/2012/09/16/2687162.html). 범위는 응용 프로그램과 유사한 DOM 구조의 계층 구조에 배치됩니다. 스코프는 표현 및 전파 이벤트를 모니터링 할 수 있습니다.
2. 범위의 특성
3. 데이터 모델로서의 범위 (데이터 모델로서의 범위)
범위는 응용 프로그램 컨트롤러와보기 간의 링크입니다. 템플릿 링크 (http://www.cnblogs.com/lclao/archive/2012/09/04/2669802.html), 지침 (http://www.cnblogs.com/lclao/archive/2012/09/09/267190.html). 범위. $ watch를 사용하면 Directive가 속성의 변경 사항을 알 수 있으므로 Directive는 업데이트 된 값을 DOM으로 렌더링합니다.
컨트롤러와 지침은 모두 범위를 참조하지만 서로를 참조하지 않습니다. 이 배열은 컨트롤러를 지침 및 DOM에서 분리합니다. 이곳은 컨트롤러를보기에서 분리하여 응용 프로그램의 테스트 스토리를 크게 향상시키기 때문에 중요한 장소입니다.
<! docType html> <html lang = "Zh-Cn"ng-app> <head> <meta charset = "utf-8"> <title> data-model </title> <style type = "text/css"> .ng-cloak {display : none; } </style> </head> <body> <div ng-controller = "myController"> 이름 : <input type = "text"ng-model = "username"/> <button ng-click = "sayhello ()"> 환영 </button> <hr/> {greeting}} <script src =. type = "text/javaScript"> </script> <script type = "text/javaScript"> 함수 myController ($ scope) {$ scope.username = "my little dada"; $ scope.sayhello = function () {$ scope.greeting = "hello ~" + $ scope.username + "!"; }; } </script> </body> </html>위의 예에서는 MyController가 "My Little Dada"와 범위로 사용자 이름 속성을 할당한다는 것을 알 수 있습니다. 그런 다음 Scope는 할당에 대한 입력을 알리고 사용자 이름 값을 입력에 미리 채 웁니다. 이것은 컨트롤러가 범위에 데이터를 작성하는 방법을 보여줍니다.
마찬가지로, 컨트롤러는 사용자가 "환영"버튼을 클릭 할 때 트리거되는 Sayhello 메소드와 마찬가지로 동작을 범위에 첨부 할 수 있습니다. Sayhello 메소드는 사용자 이름 속성을 읽거나 인사말 속성을 만들 수 있습니다. 이는 HTML 입력 제어에 바인딩되면 스코프의 속성이 자동으로 업데이트됨을 보여줍니다.
논리적으로 {{greeting}}을 표시하면 다음 두 가지 점이 포함됩니다.
{{greeting}} expression을 정의하는 템플릿 dom 노드로 검색 범위. 이 예 에서이 범위는 MyController로 전달 된 범위와 동일합니다. (우리는 나중에 범위 계층에 대해 논의 할 것입니다)
인사말 표현은 이전에 검색 한 범위를 통해 평가 된 다음 결과는 DOM 요소를 동봉하는 텍스트의 값으로 사용됩니다.
우리는 범위와 자체 속성을 렌더링 뷰를위한 데이터로 사용할 수 있다고 생각할 수 있습니다. 범위는 관련된 모든 것들에 대한 단일 진실 소스입니다.
테스트 가능성 관점에서 컨트롤러와 뷰의 분리는 렌더링 세부 사항의 간섭없이 테스트 동작에 초점을 맞출 수 있도록 기뻐합니다.
그것은 ( 'hello (hello)', function () {var scopemock = {}; var cntl = new myController (scopeMock); // 사용자 이름이 사전에 채워진 기대 (scopeMock.username) .toequal ( 'world'); // 우리가 새로운 사용자 이름과 인사 스코메이크 .USERNAM.USERNAM.USERNAM.USERNAM ( 'scopemock.useLoc.); 기대 (scopemock.greeting) .toequal ( 'Hello Angular!');});4. 스코프 계층 구조 (범위 계층)
각각의 각도 적용에는 하나의 루트 범위 만 있지만 여러 개의 아동 스코프가있을 수 있습니다.
일부 지침은 새로운 아동 스코프를 만들기 때문에 응용 프로그램에는 여러 개의 아동 스코프가있을 수 있습니다 (NG-Repeat와 같은 새로운 스코프를 생성 할 수있는 지침을 확인하려면 지침 문서를 참조하십시오). 새 범위가 생성되면 아동 범위로 부모의 범위에 추가됩니다. 이런 식으로, 첨부 된 DOM과 유사한 트리 구조가 생성됩니다.
Angular가 {{username}}을 평가하면 먼저 현재 요소와 관련된 범위의 사용자 이름 속성을 살펴 봅니다. 해당 속성이 발견되지 않으면 루트 범위에 도달 할 때까지 상위 스코프를 위쪽으로 검색합니다. JavaScript 에서이 동작을 "프로토 타입 상속"이라고하며, 아동 범위는 일반적으로 부모로부터 상속됩니다.
이 예제는 응용 프로그램에서 속성의 범위 (무엇이) 및 프로토 타입 상속을 보여줍니다.
<! docType html> <html lang = "Zh-Cn"ng-app> <head> <meta charset = "utf-8"> <title> scope-hierarchies </title> <style type = "text/css"> .ng-cloak {display : none; } .ng-scope {테두리 : 1px 점선 빨간색; . </ul> <hr/> {{greeting}} </div> <script src = "../ Angular-1.0.1.js"type = "text/javaScript> </script> <script type ="text/javaScripe "> 함수 myController ($ scope) {$ scope.department ="a a unfartment "; $ scope.employee = {name : "my little dada", 보고서 : [{name : "lclao"}, {이름 : "who^o^"}}; } </script> </body> </html>Angular는 자동으로 NG-Scope 클래스를 범위를 준수하는 요소로 배치합니다. <tyle>은 위의 예에서 정의되어 빨간색 점선을 통해 새로운 범위의 범위를 강조합니다. 리피터는 {{Employee.name}} 표현식을 평가하기 때문에 아동 범위가 필요하지만, 표현이 평가되는 범위에 따라 다른 범위는 다른 결과를 갖습니다. 마찬가지로, {{department}}의 값은 루트 범위의 프로토 타입에서 상속됩니다. 만있을 때만 부서 속성을 정의 할 수 있습니다.
5. DOM에서 스코프 검색 (DOM에서 스코프 검색)
스코프는 $ SCOPE 데이터 속성으로 DOM에 첨부되며 디버깅 목적으로 검색하는 데 사용할 수 있습니다. (응용 프로그램에서 이러한 방식으로 범위를 검색하는 것은 불가능합니다.) DOM에 첨부 된 루트 범위의 위치는 NG-APP 지침의 위치에 의해 정의됩니다. 일반적으로 ng-app은 <html> 요소에 배치되지만 다른 요소에도 배치 될 수도 있습니다. 예를 들어, 뷰의 일부만 각도에 의해 제어 필요가 있습니다.
디버거에서 범위보기 :
1. 브라우저에서 관심있는 요소를 마우스 오른쪽 버튼으로 클릭하고 "요소보기"를 선택하십시오. 브라우저 디버거가 선택한 요소를 강조 표시하는 것을 알 수 있습니다.
2. 디버거를 사용하면 콘솔의 $ 0 변수를 통해 현재 선택된 요소에 액세스 할 수 있습니다.
3. 관련 범위를 보려면 콘솔의 Angular.element ($ 0) .Scope ()를 입력 할 수 있습니다.
6. 범위 이벤트 전파 (범위 이벤트 전파)
범위는 DOM 이벤트와 유사한 방식으로 이벤트를 전파 할 수 있습니다. 이벤트는 (http://code.angularjs.org/1.0.2/docs/api/ng.$rootscope.scope#$Broadcop.scope#$Broadcast) (http://code.angularjs.org/1.0.2/docs/api/api/api/ng.$rootscope.scopeupopeThopeThopeThopeT)를 방송 할 수 있습니다. (현재 범위가 청취되면 실행됩니다)
<! docType html> <html lang = "Zh-Cn"ng-app> <head> <meta charset = "utf-8"> <title> scope-event-propagation </title> <style type = "text/css"> .ng-cloak {display : 없음; . ng-click = "$ broadcast ( 'myevent')"> $ broadcast ( "myevent") </button> <br/> 중간 범위 수 : {{count}}}} <ul> <li ng-repeat = "[1,2]"ng-controller = "myController"> Leaf Scope : {{}} </li/li> </li>} </li>} </ul> </div> <script src = "../ Angular-1.0.1.js"type = "text/javaScript"> </script> <script type = "text/javaScript"> 함수 myController ($ scope) {$ scope.count = 0; $ scope. $ on ( "myevent", function () {$ scope.count ++;}); } </script> </body> </html>7. 범위 수명주기 (범위 수명주기)
브라우저의 일반 이벤트 스트림에서 브라우저가 이벤트를 수신하면 해당 JavaScript 콜백을 실행합니다. 콜백 함수가 실행되면 브라우저는 DOM을 다시 그리고 이벤트를 기다리는 상태로 돌아갑니다.
브라우저가 각도 실행 환경 외부에서 JavaScript 코드를 호출하면 Angular가 모델의 변화를 알지 못한다는 것을 의미합니다. 모델의 수정을 올바르게 처리하려면이 명령은 $ 적용 방법을 만들어 각도 실행 환경에 들어가야합니다. $ Apply 방법의 모델이 변경 될 때만 Angular로 올바르게 계산됩니다. 예를 들어, 지침은 NG-Click과 같은 DOM 이벤트에 대한 리언트를 듣고 $ Apply 방법의 표현식을 평가해야합니다.
표현식을 평가 한 후 $ Apply 메소드는 $ 다이제스트를 실행합니다. $ 다이제스트 단계에서 스코프는 $ watch의 모든 표현식을 확인하고 현재 값을 이전 값과 비교합니다. 더러운 점검은 비동기입니다. 즉, 할당 문 (예 : $ scope.username = "angular")에 즉시 $ watch가 알리지 않지만 $ watch의 알림은 $ 다이제스트 단계로 지연됩니다. 이 지연은 여러 모델 업데이트를 $ 시계 알림으로 결합하여 $ watch 알림 프로세스 중에 다른 $ 시계가 실행되지 않도록하기 때문에 필요합니다. $ watch가 모델의 값을 변경하면 $ 다이제스트주기가 증가합니다.
1) 생성 (스코프 생성)
루트 범위는 응용 프로그램 시작 프로세스 중에 $ Injector (http://code.angularjs.org/1.0.2/docs/api/auto.$injector)에 의해 생성됩니다. 템플릿 링크 프로세스 중에 일부 지침은 새로운 자식 범위를 만듭니다.
2) 감시자 등록 (레지스터 감시자)
템플릿 링크 프로세스 중에 Directive Reggists $ watch in scope. 이 시계는 모델을 DOM으로 전파하는 값으로 사용됩니다.
3) 모델 돌연변이 (모델 변경)
변경 사항을 올바르게 감지하려면 범위로 래핑해야합니다. $ 적용. (각도 API는이를 암시 적으로 수행 했으므로 컨트롤러에서 동기 작업을 수행하거나 $ http 또는 $ timeout을 사용하여 비동기 작업을 할 때 추가 $ 적용 통화가 필요하지 않습니다).
4) 돌연변이 관찰 (변화 모니터링)
$ Apply가 끝나면 Angular는 루트 범위에서 $ 다이제스트주기를 실행하여 모든 아동 스코프로 전파됩니다. $ 다이제스트주기에서는 $ watch에 등록 된 모든 표현식 또는 기능을 확인하여 모델이 변경되었는지 확인합니다. 변경 사항이 발생하면 해당 $ watch 리스너가 호출됩니다.
5) 범위 파괴 (범위 파괴)
아동 범위가 더 이상 필요하지 않은 경우, 아동 스코프 생산자가 범위를 통해이를 파괴하는 것은 책임입니다. $ destroy () API. 이렇게하면 아동 스코프 모델이 사용하는 메모리를 GC (Garbage Collector)에 의해 재활용 할 수 있도록 $ 다이제스트 호출 전파가 아동 범위로 전파됩니다.
1. 스코프와 지시
컴파일 단계에서 컴파일러는 DOM 템플릿 매칭 지침에 의존합니다. 지시문은 일반적으로 두 가지 범주로 나눌 수 있습니다.
dobule-curly expression {{expression}}과 같은 지침 관찰은 $ watch 메소드를 사용하여 리스너를 등록합니다. 표현식 (값)이 변경 될 때마다, 그러한 지시문은보기를 업데이트하도록 통지해야합니다.
NG-Click과 같은 청취자 지시문은 청취자를 DOM에 등록합니다. DOM의 청취자가 해고되면 Directive는 관련 표현식을 실행하고 $ 적용 방법을 사용하여보기를 업데이트합니다.
외부 이벤트 (예 : 사용자 조치, 타이머 또는 XHR)가 들리면 관련 표현식을 $ 적용 메소드를 통해 범위에 적용하여 모든 리스너를 올바르게 업데이트 할 수 있어야합니다.
2. 스코프를 만드는 지침
대부분의 경우 지침과 범위는 상호 영향을 미치지 만 새로운 스코프 인스턴스는 생성되지 않습니다. 그러나 일부 지침 (예 : NG-Controller 및 NG-REPEAT)은 해당 DOM 요소에 자식 범위를 추가하여 새로운 범위를 만듭니다. Angular.element (adomelement) .scope ()를 사용하여 DOM 요소의 범위를 봅니다.
3. 컨트롤러와 스코프
다음의 경우 범위와 컨트롤러가 서로 영향을 미칩니다.
4. SCOPE $ 시계 성능 고려 사항 (SCOPE $ 시계 성능 고려 사항)
Angular에서는 속성의 변화를 감지하기 위해 더러운 검사를 수행하는 것이 일반적인 작업입니다. 이를 위해서는 더러운 검사 기능이 효율적이어야합니다. DOM 액세스가 JavaScript 객체 속성에 액세스하는 것보다 약간 느리게 주문되기 때문에 Dirty Checking Functs는 DOM 액세스 작업을 수행하지 않도록주의하십시오.
위는 AngularJS 범위에 대한 정보입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!