$ scope와 $ rootScope의 차이점
누구나 $ scope와 $ rootScope의 차이점을 설명 할 수 있습니까?
나는 생각한다
$ 범위 :
이것을 사용하여 특정 페이지에서 특정 컨트롤러의 ng-model 속성을 얻을 수 있습니다.
$ rootScope
이것을 사용하여 모든 페이지에서 모든 컨트롤러의 모든 ng-model 속성을 가져올 수 있습니다.
이 올바른지? 아니면 다른 건?
"$ rootScope"는 웹 페이지에서 생성 된 모든 "$ scope"각도 개체의 상위 개체입니다.
$ scope는로 생성 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의 개발자 가이드 범위 에 따르면 :
각 Angular 응용 프로그램에는 정확히 하나의 루트 범위가 있지만 여러 하위 범위가있을 수 있습니다. 일부 지시문은 새 하위 범위를 생성하기 때문에 응용 프로그램은 여러 범위를 가질 수 있습니다 (어떤 지시문이 새 범위를 생성하는지 확인하려면 지시문 문서를 참조하십시오). 새 범위가 작성되면 상위 범위의 하위로 추가됩니다. 이렇게하면 연결된 DOM과 유사한 트리 구조가 생성됩니다.
컨트롤러와 지시문 모두 범위에 대한 참조가 있지만 서로에 대한 참조는 없습니다. 이 배열은 DOM뿐만 아니라 지시문으로부터 컨트롤러를 분리합니다. 이것은 컨트롤러가 불가지론 적으로 보이게하여 애플리케이션의 테스트 스토리를 크게 향상시키기 때문에 중요한 포인트입니다.
$rootScope어떤 컨트롤러에 있든 전 세계적으로 $scope사용할 수 있지만 현재 컨트롤러와 하위 컨트롤러 만 사용할 수 있습니다.
다른 방법으로 우리는 이것을 볼 수 있습니다. $rootScope글로벌이고 $scope로컬입니다. Controller페이지에 할당 될 때 $scope변수가이 컨트롤러에 바인딩되기 때문에 여기에서 사용할 수 있습니다. 그러나 우리가 다른 컨트롤러 나 서비스를 통해 그 가치를 공유하고 싶을 때 $rootScope사용되고 있습니다 $rootScope.
이 두 단어를 어떻게 정의하는지에 대한 두 번째 질문이 맞습니다.
마지막으로 약간 벗어난 부분이 있으므로 $rootScope조심해서 사용하십시오 . 전역 변수를 사용하는 방식과 비슷하게 디버깅이 어려울 수 있으며 실수로 타이머 내부 어딘가에서 전역 변수를 변경하거나 판독을 잘못하게 만들 수 있습니다.
Every application has atleast one single rootScope and its lifecycle is the same as the app and every controller can have it's own scope, that is not shared with others.
Have a look at this article :
https://github.com/angular/angular.js/wiki/Understanding-Scopes
I recommend you read the official in-depth Angular documentation for scopes. Start at the section 'Scope Hierarchies':
https://docs.angularjs.org/guide/scope
Essentially, $rootScope and $scope both identify specific parts of the DOM within which
- Angular operations are carried out
- variables declared as part of either the $rootScope or $scope are available
Anything that belongs to the $rootScope is available globally across your Angular app, whereas anything that belongs to a $scope is available within the part of the DOM to which that scope applies.
The $rootScope is applied to the DOM element that is the root element for the Angular app (hence the name $rootScope). When you add the ng-app directive to an element of the DOM, this becomes the root element of the DOM within which $rootScope is available. In other words, properties etc of $rootScope will be available throughout your entire Angular application.
An Angular $scope (and all of it's variables and operations) is available to a particular subset of the DOM within your application. Specifically, the $scope for any particular controller is available to the part of the DOM to which that particular controller has been applied (using the ng-controller directive). Note though that certain directives e.g. ng-repeat, when applied within a part of the DOM where the controller has been applied, can create child scopes of the main scope - within the same controller - a controller doesn't necessarily contain only one scope.
If you look at the generated HTML when you run your Angular app, you can easily see which DOM elements 'contain' a scope, as Angular adds the class ng-scope on any element to which a scope has been applied (including the root element of the app, which has the $rootScope).
By the way, the '$' sign at the start of $scope and $rootScope is simply an identifier in Angular for stuff that's reserved by Angular.
Note that using $rootScope for sharing variables etc. between modules and controllers isn't generally considered best practice. JavaScript developers talk about avoiding 'pollution' of the global scope by sharing variables there, since there may be clashes later on if a variable of the same name is used somewhere else, without the developer realising it's already declared on the $rootScope. The importance of this increases with the size of the application and the team that's developing it. Ideally the $rootScope will only contain constants or static variables, that are intended to be consistent at all times across the app. A better way of sharing stuff across modules may be to use services and factories, which is a another topic!
Both are Java script objects and the difference is illustrated by diagram as below.
NTB:
First angular application try to find the property of any model or function in $scope , if it doesn't found the property in $scope , then it search in parent scope in upper hierarchy. If the property is still not found in upper hierarchy then angular tries to resolve in $rootscope.
New styles, like John Papa's AngularJS Styleguide, are suggesting that we shouldn't be using $scope to save current page's properties at all. Instead we should use the controllerAs with vm approach where the view binds to the controller object itself. Then use a capture variable for this when using the controllerAs syntax. Choose a consistent variable name such as vm, which stands for ViewModel.
You will still need the $scope for its watching capabilities though.
참고 URL : https://stackoverflow.com/questions/22785775/difference-between-scope-and-rootscope
'code' 카테고리의 다른 글
| 모든 글리프의 너비가 동일한 지 어떻게 확인합니까? (0) | 2020.09.09 |
|---|---|
| django 1.5-정적 태그 내에서 변수를 사용하는 방법 (0) | 2020.09.09 |
| Python으로 UTF8 CSV 파일 읽기 (0) | 2020.09.09 |
| jQuery : 선택한 파일 이름 가져 오기 (0) | 2020.09.09 |
| 상수 목록의 인라인 인스턴스화 (0) | 2020.09.09 |