$scope와 $rootScope의 차이
$scope와 $rootScope의 차이점을 설명해 주실 수 있습니까?
생각합니다
$140:
이를 사용하면 특정 페이지에서 특정 컨트롤러의 ng-model 속성을 얻을 수 있습니다.
$rootScope(루트스코프)
이를 사용하면 임의의 페이지에서 임의의 컨트롤러의 모든 ng-model 속성을 가져올 수 있습니다.
이거 맞는건가요?아니면 다른 건요?
"$rootScope"는 웹 페이지에서 작성된 모든 "$scope" 각도 객체의 상위 개체입니다.
은 $120으로 됩니다.ng-controller는 $rootscope로 됩니다.ng-app.
주요 차이점은 개체에 할당된 속성을 사용할 수 있는지 여부입니다.「」가 .$scope 이외에서는 할 수 단, 에는 「이러다」, 「이러다」가 되어 있는 경우는, 이러다」가 할당되어 있습니다.$rootScope어디서든 사용할 수 있습니다.
: :에서 을 치환하는 $rootScope$scope은 두 의 첫 .
angular.module('example', [])
.controller('GreetController', ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.name = 'World';
$rootScope.department = 'Angular';
}
])
.controller('ListController', ['$scope',
function($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}
]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="example">
<div class="show-scope-demo">
<div ng-controller="GreetController">
Hello {{name}}!
</div>
<div ng-controller="ListController">
<ol>
<li ng-repeat="name in names">{{name}} from {{department}}</li>
</ol>
</div>
</div>
</body>Angular's Developer's Guide to Scopes에 따르면:
각 Angular 응용 프로그램에는 루트 스코프가 정확히 하나이지만 여러 개의 하위 스코프가 있을 수 있습니다.일부 지시문이 새 하위 범위를 생성하므로 응용 프로그램에 여러 범위가 있을 수 있습니다(어떤 지시문이 새 범위를 생성하는지 보려면 지시문 문서를 참조하십시오).새 범위가 생성되면 상위 범위의 하위 범위로 추가됩니다.이것에 의해, 접속되어 있는 DOM 에 평행한 트리 구조가 작성됩니다.
컨트롤러와 디렉티브는 모두 범위를 참조하지만 서로 참조하지는 않습니다.이 배치에 의해 컨트롤러는 디렉티브 및 DOM에서 격리됩니다.이는 컨트롤러에 의존하지 않는 것으로 인식되어 애플리케이션의 테스트 스토리가 대폭 개선되기 때문에 중요한 포인트입니다.
$rootScope글로벌하게 할 수 있습니다만, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」는 사용할 수 있습니다.$scope현재 컨트롤러와 그 하위 컨트롤러에서만 사용할 수 있습니다.
다른 로 보면, '하다, 하다, 하다, 하다'입니다.$rootScope 반면, 「」는$scope로컬입니다.언제Controller되어 있기 에, 「 」는 「 」입니다.$scope변수는 이 컨트롤러에 바인딩되기 때문에 여기서 사용할 수 있습니다., 그 를 다른 또는, 그 가치를 다른 컨트롤러 또는 서비스로 공유할 수 .$rootScope.여러 가지 방법으로 값을 공유할 수 있지만 이 경우에는$rootScope).
이 두 단어를 어떻게 정의하느냐에 대한 두 번째 질문은 정답입니다.
마지막으로 조금 빗나가면$rootScope주의해서글로벌 변수를 사용하는 방법과 마찬가지로 디버깅이 번거로울 수 있으며 타이머 내부 어딘가에서 실수로 글로벌 변수를 변경하여 판독이 잘못될 수 있습니다.
모든 애플리케이션에는 적어도1개의 rootScope가 있으며 그 라이프 사이클은 어플리케이션과 동일하며 모든 컨트롤러는 다른 사용자와 공유되지 않는 독자적인 범위를 가질 수 있습니다.
이 기사를 보세요.
https://github.com/angular/angular.js/wiki/Understanding-Scopes
스코프에 대한 공식 Angular 문서를 자세히 읽어보는 것이 좋습니다.'범위 계층' 섹션부터 시작합니다.
https://docs.angularjs.org/guide/scope
기본적으로 $rootScope와 $scope는 모두 DOM의 특정 부분을 식별합니다.
- 각도 작업이 수행된다.
- $rootScope 또는 $scope의 일부로 선언된 변수를 사용할 수 있습니다.
$rootScope에 속하는 모든 것은 Angular 앱에서 글로벌하게 사용할 수 있는 반면, $scope에 속하는 모든 것은 해당 범위가 적용되는 DOM 부분 내에서 사용할 수 있습니다.
$rootScope는 Angular 앱의 루트 요소인 DOM 요소에 적용됩니다(따라서 $rootScope라는 이름).ng-app 디렉티브를 DOM 요소에 추가하면 $rootScope를 사용할 수 있는 DOM 루트 요소가 됩니다.즉, $rootScope 속성 등은 Angular 어플리케이션 전체에서 사용할 수 있습니다.
Angular $scope(및 모든 변수와 연산)는 어플리케이션 내의 DOM의 특정 서브셋에서 사용할 수 있습니다.특히 특정 컨트롤러의 $scope는 특정 컨트롤러가 적용된 DOM 부분에서 사용할 수 있습니다(ng-controller 디렉티브 사용).단, 컨트롤러가 적용된 DOM의 일부에 ng-repeat 등의 특정 지시사항을 적용하면 메인 스코프의 하위 스코프를 작성할 수 있습니다(같은 컨트롤러 내에).컨트롤러가 반드시 1개의 스코프만을 포함하는 것은 아닙니다.
Angular 앱을 실행할 때 생성된 HTML을 보면, Angular는 스코프가 적용된 요소($rootScope를 가진 앱의 루트 요소 포함)에 클래스 ng-scope를 추가하기 때문에 어떤 DOM 요소가 스코프를 '포함'하는지 쉽게 알 수 있습니다.
참고로 $scope와 $rootScope의 시작 부분에 있는 '$' 기호는 Angular에 의해 예약된 것을 나타내는 Angular의 식별자입니다.
모듈과 컨트롤러 간에 변수 등을 공유하기 위해 $rootScope를 사용하는 것은 일반적으로 베스트 프랙티스로 간주되지 않습니다.JavaScript 개발자는 $rootScope에 이미 선언된 것을 깨닫지 못한 채 같은 이름의 변수를 다른 곳에서 사용하면 나중에 충돌이 발생할 수 있으므로 변수를 공유함으로써 글로벌 범위의 '오염'을 피하는 것에 대해 이야기합니다.애플리케이션의 규모와 개발 팀의 규모에 따라 이 기능의 중요성도 높아집니다.$rootScope에는 앱 전체에서 항상 일관성을 유지하기 위한 상수 또는 정적 변수만 포함되어 있는 것이 이상적입니다.모듈 간에 정보를 공유하는 더 좋은 방법은 서비스 및 공장을 사용하는 것일 수 있습니다. 이는 또 다른 주제입니다.
둘 다 Java 스크립트 오브젝트이며, 그 차이는 다음과 같이 다이어그램에 나타나 있습니다.
NTB:
첫 번째 각도 어플리케이션은 $scope에서 모델 또는 함수의 속성을 찾으려고 합니다.$scope에서 속성을 찾을 수 없는 경우 상위 계층의 부모 범위에서 검색합니다.그래도 상위 계층에서 속성을 찾을 수 없는 경우 angular는 $rootscope에서 해결하려고 합니다.
John Papa's Angular 같은 새로운 스타일JS Styleguide는 이 기능을 사용하지 말 것을 제안하고 있습니다.$scope현재 페이지의 속성을 저장합니다., 는 ㅇㅇㅇㅇㅇ를 해야 합니다.controllerAs with vm뷰가 컨트롤러 오브젝트 자체에 바인드되는 접근법입니다.컨트롤러 As llerller 、컨트롤러 As 、컨트롤러View Model (View Model) VM (View Model)
★★★★★★★★★★★★★는 필요합니다.$scope츠미야
언급URL : https://stackoverflow.com/questions/22785775/difference-between-scope-and-rootscope
'programing' 카테고리의 다른 글
| 안전하지 않은 인라인 JavaScript/CSS 코드 없이 React를 사용하는 방법 (0) | 2023.03.01 |
|---|---|
| 도커 컨테이너에서 실행되는 Tomcat 8에 Java webapp 배포 (0) | 2023.03.01 |
| ng-style로 div의 배경 이미지를 설정하는 방법 (0) | 2023.03.01 |
| Wordpress 테마 커스터마이저 - 사용자가 이동하고 위젯을 구성할 수 있는 영역 추가 (0) | 2023.03.01 |
| VARCHAR2(10 CHAR)와 NVARCHAR2(10)의 차이점 (0) | 2023.03.01 |