AngularJS Scope (scope)
Scope is the link between HTML (view) and JavaScript (controller).
Scope is an object with available methods and properties.
Scope can be applied on views and controllers.
How to use Scope
When you create a controller in AngularJS, you can pass the $scope object as a parameter:
AngularJS instance
The properties in the controller correspond to the properties on the view:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl">{{carname}}</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.carname = "Volvo";});</script><p>Create an attribute name "carname" in the controller, which corresponds to the name used in the view in {{ }}. </p></body></htmlRunning results:
Volvo
Create an attribute name "carname" in the controller, which corresponds to the name used in the view in {{ }}.
When adding a $scope object to the controller, the view (HTML) can get these properties.
In the view, you don't need to add the $scope prefix, you just need to add the attribute name, such as: {{carname}}.
Scope Overview
AngularJS application composition is as follows:
View (view), that is, HTML.
Model, data available in the current view.
Controller, i.e. JavaScript function, can add or modify properties.
scope is the model.
scope is a JavaScript object with properties and methods that can be used in views and controllers.
AngularJS instance
If you modify the view, the model and controller will also be updated accordingly:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name">My name is {{name}}</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.name = "John Doe";});</script><p>When you modify the value in the input box, it will affect the model, and of course it will also affect the corresponding attribute value of the controller. </p></body></html>Running results:
My name is John Doe
When you modify the value in the input box, it will affect the model and of course it will also affect the corresponding attribute value of the controller.
Scope Scope
It is very important to know the scope you are currently using.
In the above two instances, there is only one scope scope, so it is relatively simple to process. However, in large projects, there are multiple scopes in HTML DOM. At this time, you need to know which scope corresponding to the scope you are using.
AngularJS instance
When we use the ng-repeat directive, each duplicate accesses the current duplicate object:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><ul> <li ng-repeat="x in names">{{x}}</li></ul></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.names = ["Emil", "Tobias", "Linus"];});</script></body></html>Running results:
Each <li> element can access the current duplicate object, which corresponds to a string, and is represented by the variable x.
Root scope
All applications have a $rootScope that can be used in all HTML elements contained in the ng-app directive.
$rootScope can be used throughout the application. It is the bridge of scope in each controller. Values defined with rootscope can be used in each controller.
AngularJS instance
When creating a controller, pass $rootScope as a parameter and can be used in the application:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl">The last name is {{lastname}} Family members:<ul> <li ng-repeat="x in names">{{x}} {{lastname}}</li></ul></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $rootScope) { $scope.names = ["Emil", "Tobias", "Linus"]; $rootScope.lastname = "Refsnes";});</script><p>Note that $rootScope can be accessed both inside and outside the loop object. </p></body></html>Running results:
The last name is a member of the Refsnes family:
Note that $rootScope is accessible both inside and outside the loop object.