In some large projects that use the angular framework, there seem to be many controllers, and each controller has its own $scope.
1、$rootscope
$rootScope top-level scope, also known as root scope, is similar to window, and the properties of window can be accessed in any subscope. $rootScope is the intermediate field for all controllers to communicate data, that is, the data in $rootScope can be obtained through $ in each controller.
2、$scope
(1) Function
$scope is a bridge between the view and the controller. The scoped view will be updated immediately when modifying data. The same $scope will be re-rendered immediately when the $scope changes. Each controller controller corresponds to a $scope. By assigning values to its attributes, data can be passed to the template for rendering.
(2) Life cycle
Creation: When creating a controller or instruction, AngularJS will use $injector to create a new scope and pass the scope in when the newly created controller or instruction is run.
Link: When Angular starts running, all $scope objects are attached or linked to the view. All functions that create $scope objects will also attach themselves to the view. These scopes register the functions that need to be run when changes in the Angular application context. These functions are called $watch functions, through which Angular knows when the event loop is started.
Update: When the event loop runs, it usually performs on the top-level $scope object (called $rootScope), each subscope performs its own dirty value detection. Each monitoring function checks for changes. If any change is detected, the $scope object will trigger the specified callback function.
Destruction: This scope will clean up and destroy itself when a $scope is no longer needed in the view. Although you will never need to clean up the scope (because Angular will handle it for you), it is useful to know who created the scope because you can clean up the scope using a method called $destory() on $scope.
3. Prototype inheritance
scope is the scope in AngularJS (actually the place where data is stored), which is very similar to the prototype chain of JavaScript. When searching, you should first find your scope. If it is not found, search up the scope chain until you reach the root scope rootScope.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="parentController">
{{name}}
<div ng-controller="sonController">
{{name}}
</div>
</body>
<script type="text/javascript" src="./"></script>
<script>
var parentController=function($scope){
$="parent";
}
var sonController=function($scope){
($);//parent
}
parentController.$injector=["$scope"];
sonController.$injector=["$scope"];
("myApp",[])
.controller("parentController",parentController)
.controller("sonController",sonController)
</script>
</html>
First, the child controller looks for the name attribute in its scope. If it is not found, look for the parent controller.
To add one thing, how to modify the value of $scope in the parent controller in the child controller, it can be seen as follows:
$scope.$="son";In the child controller, $scope.$parent represents $scope in the parent controller, and then modify its value.
4、$new
$scope.$new(isolated, parent); child scope used to define scope
1) Parameters: isolated, whether it is isolated. If the value is true, then this scope will not inherit the prototype from the parent scope. The scope is independent, and the property of the parent scope cannot be seen here. If the value is false, it inherits from the parent (all members of the parent scope can be accessed), and defaults to false!
parent is used to specify the parent scope of the created child scope. If there is no such parameter, the parent scope is the $scope that calls the current $new method
var myController=function($scope){
$="hello!"
var scope1=$scope.$new(false,$scope);
(); //hello! scope1 inherits $scope, so you can access data var scope2=$scope.$new(true,$scope);
();// undefined The first parameter is true, indicating that it is isolated, cannot be inherited, and it does not have it, so it is undefined }
myController.$injector=["$scope"];
("myApp",[])
.controller("myController",myController)
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.