Home > Developer > Web Develop
A. What is scope?
Scope is the execution context for expressions (expression), and scope can monitor ($watch) expression changes and propagation events ($emit, $broadcast).
Two. Scope features
1.scope provides the $watch API for monitoring model changes
2.scope provides the $apply API to apply DOM operations outside the angular environment to angular environments
3.scope inherits properties from the parent scope through the prototype. Child scope has direct access to properties on the parent scope, and parent scope does not have direct access to properties on child scope
Three. Scope hierarchy
Each angular app has and has only one root scope, but can have multiple child scopes.
The app can have multiple child scopes, and some directive will create a new child scope (such as ng-repeat). When the new scope is created, they are added as a child scope to the parent scope, creating a tree structure similar to the DOM they are attached to.
When angular evaluates an expression, it first looks at the properties of the scope associated with the current element. If no corresponding attribute is found, it will search the parent scope up until the root scope is reached. In JavaScript, this behavior is referred to as ' prototype inheritance ', and the child scope typically inherits from their parent scope.
Four. Scope Event Propagation
Scope can propagate events in a manner similar to DOM events. Events can be broadcast to child scope or emit to parent scope (current scope has listener execution)
1.parent Scope distributes event examples to the child scope broadcast broadcast event and child scope to the parent scope emit:
<!DOCTYPE HTML><HTML><Head> <title>angular1.x</title> <Scripttype= "Text/javascript"src=".. /lib/angular1.6.5.js "></Script></Head><BodyNg-app= "App"> <DivNg-controller= "Parent">{{count}}<DivNg-click= "$broadcast (' Tochild ')">Broadcast events to child elements</Div> <ulNg-controller= "Child">{{Count1}}<binNg-click= "$emit (' toparent ')"ng-repeat= "item in [1,2,3,4,5,6,7]">{{Item}}</Li> </ul> </Div><Scripttype= "Text/javascript"> varapp=Angular.module ('app',[]); App.controller ('Parent',['$scope',function($scope) {$scope. Count= 1; $scope. $on ('toparent',function(){ //Child Scope $emit up-distributed snooping$scope. Count++; }); $scope. $on ('Tochild',function(){ //current scope is monitored and will be executed$scope. Count++; }) }]); App.controller (' Child',['$scope',function($scope) {$scope. Count1= 1; $scope. $on ('Tochild',function(){ //Parent Scope $broadcast down-broadcast monitoring$scope. Count1++; }) }]);</Script></Body></HTML>
In this example, click on the Count of the Li parent element to +1, click ' Broadcast event ' to child element, the parent count and the Count1 page of the child will also be +1, as to how the parent's count will be added 1 because there is tochild listener in scope now.
Four. Scope's life cycle
AngularJs Scope Detailed
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
