Explanation of scope scope in angularjs

This article mainly introduces the detailed explanation of the scope of angularjs learning. Now I will share it with you and give you a reference.

Introduction

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

Scope is an object that stores the application data model and has available methods and properties.

Scope can be applied to views and controllers.

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

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

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

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

<script>
var app = angular.module(&#39;test&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.name = "天下行走";
});
</script>

Output result: Walking around the world

Create an attribute name "name" in the controller, which corresponds to the name used in {{ }} in the view.

When the $scope object is added to the controller, the view (HTML) can obtain these properties.

In the view, you do not need to add the $scope prefix, you only need to add the attribute name, such as: {{name}}.

AngularJS application is composed as follows:

View (view), that is, HTML.

Model (model), the data available in the current view.

Controller (controller), which is a JavaScript function, can add or modify properties.

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

Let’s look at another example:

<p ng-app="myApp" ng-controller="myCtrl">
  输入你的名字：
  <input ng-model="name">
  <h1 id="greeting">{{greeting}}</h1>
  <button ng-click=&#39;sayHello()&#39;>greet</button>  
</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.name = "张三";
  $scope.sayHello = function() {
    $scope.greeting = $scope.name + &#39;是个笨蛋!&#39;;
  };
});
</script>

In this example,

1. Controller: MyCtrl, which references $scope and is registered on it It has two properties and one method

2. $scope object: holds the data model required for the above example, including name attribute and greeting attribute (Note: This is done in the sayHello() method registered when calling) and sayHello() methods

3. View: has an input box, a button and a content block that uses two-way binding to display data

The specific example has two processes, from the perspective of controller initiation:

1. The controller writes attributes to the scope:

To the role The name in the domain is assigned a value, and then the scope notifies the input data in the view that it has changed. Because input realizes two-way binding through ng-model, it can know the change in name, and then render the changed value in the view

2. The controller writes the method

in the scope to assign a value to the sayHello() method in the scope. This method is called by the button in the view, because the button is bound to this method through ng-click. When the user When the button is clicked, sayHello() is called. This method reads the name attribute in the scope, adds the suffix string, and then assigns it to the newly created greeting attribute in the scope.

The entire example process if From the perspective of the view, it mainly consists of the following three parts:

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

1. Go to the scope according to the name in ng-model. If there is already a value, then fill the current input box with this default value

2. Accept user input and pass the string entered by the user to name. At this time, the attribute value in the scope is updated in real time to the value entered by the user

2. Logic in button

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

3, rendering logic of {{greeting}}

1. Initial stage: When the user does not click the button, the content will not be displayed

2. Value phase: After the user clicks, this expression will get the greeting attribute from the scope, and in this example this function The domain and the controller are the same. At this time, the greeting attribute under the scope already exists, and this attribute is retrieved.

3. Calculation phase: in the current scope Go down and calculate the greeting expression, and then render the view, showing that Zhang San is an idiot!

After analyzing the example process from the above two perspectives, we can know: The scope object and its properties are the only data source for view rendering.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

angularjs uses gulp-uglify to compress the execution error after execution solution

Vue ElementUI implements dynamic rendering and visualization of forms Configuration method

A brief discussion on the solution to excessively large files after webpack packaging

Actually solve the problem of UglifyJs error when packaging iview (detailed tutorial)

The problem of refreshing 404 after using vue to package the project (detailed tutorial)

The above is the detailed content of Explanation of scope scope in angularjs. For more information, please follow other related articles on the PHP Chinese website!