Detailed explanation of scope of angularjs learning

Introduction

Scope is the link between HTML (view) and JavaScript (controller).

Scope is an object that stores application data models, with available methods and properties.

Scope can be applied on views and controllers.

Scope is the adhesive between the controller and the view of the web application:

Controller --> Scope --> View (DOM)
Directive --> Scope --> View (DOM)

When you create a controller in AngularJS, you can pass the $scope object as a parameter:

<div ng-controller="myCtrl">
<h1>{{name}}</h1>
</div>

<script>
var app = ('test', []);
('myCtrl', function($scope) {
  $ = "Walking in the World";
});
</script>

Output result: The world is walking

Create an attribute name "name" 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: {{name}}.

AngularJS application composition is as follows:

View (view), that is, HTML.

Model, the data available in the current view.

Controller, i.e. JavaScript functions, can add or modify properties.

scope is a JavaScript object with properties and methods that can be used in views and controllers.

Let’s take a look at another example:

<div ng-app="myApp" ng-controller="myCtrl">
  Enter your name：
  <input ng-model="name">
  <h1>{{greeting}}</h1>
  <button ng-click='sayHello()'>greet</button>  
</div>

<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
  $ = "Zhang San";
  $ = function() {
    $ = $ + 'It's a fool!';
  };
});
</script>

In this example,

1. Controller: MyCtrl , which references $scope and registers two properties and a method on it
2. $scope object: holds the data model required for the example above, including the name attribute, the greeting attribute (Note: this is registered when the sayHello() method is called) and the sayHello() method
3. View: Have an input box, a button, and a content block that uses two-way binding to display data

Then the entire example has two processes, from the perspective of controller initiation:

1. The controller writes properties to the scope:

Assign a value to the name in the scope, and then the scope notifies the input data in the view that the input data has changed. Because the two-way binding is implemented through ng-model, you can know the name changes, and then render the changed value in the view.

2. How to write the controller into scope

Assign a value to the sayHello() method in the scope, which is called by the button in the view, because the button binds the method through ng-click. When the user clicks the button, saysHello() is called. This method reads the name attribute in the scope, adds a suffix string, and then assigns the value to the newly created greeting attribute in the scope.

If you look at the entire example from a view point of view, it mainly consists of the following three parts:

1. Rendering logic in input: shows the scope through ng-model and the two-way binding of a form element in the view

1. Take the scope according to name in ng-model. If there is already a value, then use this default value to fill the current input box.
   
2. Accept user input and pass the string entered by the user to name. At this time, the property value in the scope is updated in real time to the value entered by the user.

2. Logic in button

Accept user clicks to call the sayHello() method in scope

3. {{greeting}} rendering logic

1. Initial phase: When the user does not click the button, the content is not displayed
2. Value stage: After the user clicks, this expression will take the greeting property in scope. In this example, the scope and the controller are the same. At this time, the greeting property has already existed under the scope, and this property is retrieved.
3. Computation stage: calculate the greeting expression in the current scope, then render the view, showing that Zhang San is a fool!

After the above two angle analysis example processes, we can know that: scope objects and their properties are the only source of data for view rendering.

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.