In AngularJS, Scope is one of the key concepts connecting controllers and views. Scope defines the data model in the application and establishes two-way data binding between the controller and the view. This article will introduce the concept, features and usage of AngularJS Scope in detail, and provide some examples to help readers better understand and apply.
What is Scope?
Scope (scope) is an important concept in the AngularJS framework, which is used to describe the data model in the application. It is a JavaScript object that contains data and methods in the application. Scope establishes the connection between the controller and the view, and realizes automatic data update through two-way data binding.
Scope Hierarchy
In AngularJS, Scope forms a hierarchical structure corresponding to the DOM structure of an HTML page. Every Scope has a parent Scope, the topmost Scope is called the root Scope. This hierarchy allows data to be shared between different controllers and views.
create scope
AngularJS automatically creates a root-level Scope for each application. In addition, we can also create new Scopes in the controller. By using the keyword inside a controller function $scope, we can define a new Scope.
app.controller('MyController', function($scope) {
$scope.name = 'John';
});
In the above code, we defined a namevariable named in the controller and bound it to the Scope of the controller. This way, namethe variable can be used in the view.
Inheritance of Scope
There is an inheritance relationship between Scopes, and the child Scope inherits the properties and methods of the parent Scope. This inheritance allows data to be shared between controllers and views at different levels.
app.controller('ParentController', function($scope) {
$scope.name = 'John';
});
app.controller('ChildController', function($scope) {
// ChildController 继承了 ParentController 的 Scope
$scope.age = 30;
});
In the above code, the Scope of ChildControlleris inherited ParentController, so namethe variable can be ChildControllerused in .
Scope's life cycle
Scope's lifecycle corresponds to that of an AngularJS application. When AngularJS initializes the application, a root-level Scope is created and remains unchanged throughout the application. AngularJS creates a new Scope whenever a new view or controller is created.
In a single-page application, when the view is switched, AngularJS will destroy the old Scope and create a new Scope. This ensures that each view has its own independent data model and does not interfere with each other.
Scope data binding
Scope realizes the two-way connection with the view through data binding. When the data in the Scope changes, the view is automatically updated; and vice versa, when the user enters data in the view, the data in the Scope is also updated.
one-way data binding
One-way data binding is the simplest way of data binding, by using double brackets in the view {
{ }}to display the variables in the Scope.
<div ng-controller="MyController">
<p>{
{ name }}</p>
</div>
In the above code, namethe value of the variable will be displayed in <p>the element.
two-way data binding
Two-way data binding is one of the features of AngularJS, which enables changes in the view to be synchronized to the Scope, and vice versa. By using the directive in the form element ng-model, we can achieve two-way data binding.
<div ng-controller="MyController">
<input type="text" ng-model="name">
<p>Hello, {
{ name }}!</p>
</div>
In the above code, the value entered in the input box will be updated to namethe variable of Scope in real time, and then <p>displayed in the element.
Scope's event listener
Scope also provides some events for monitoring data changes. These events can be used to execute custom logic when data changes.
$watchevent
$watchThe method is used to monitor the change of the specified variable and execute the callback function when the change occurs.
app.controller('MyController', function($scope) {
$scope.name = 'John';
$scope.$watch('name', function(newValue, oldValue) {
console.log('Name changed from ' + oldValue + ' to ' + newValue);
});
});
In the above code, we use $watchthe method to monitor namethe change of the variable, and print out the old and new values when the change occurs.
$emitand $broadcastevents
$emitThe and $broadcastmethods are used to broadcast events in the Scope hierarchy. $emitmethods send events to parent Scopes, and $broadcastmethods send events to child Scopes.
app.controller('ParentController', function($scope) {
$scope.$on('myEvent', function(event, data) {
console.log('Received data: ' + data);
});
});
app.controller('ChildController', function($scope) {
$scope.$emit('myEvent', 'Hello');
});
In the above code, when the method ChildControlleris used $emitto send an event, the method ParentControllerin $onwill receive the event and print out the passed data.
in conclusion
AngularJS Scope (Scope) is the key concept in the AngularJS framework responsible for connecting controllers and views. Through Scope, we can define and share the data model in the application, and realize the automatic update of data through two-way data binding. This article introduces the concept, hierarchical structure, creation method and life cycle of Scope in detail, and provides examples of data binding and event monitoring. I hope this article can help readers better understand and apply AngularJS Scope, so as to build more flexible and interactive Web applications.