How to use two-way binding in AngularJs

This article mainly introduces the two-way binding principle (data binding mechanism) of AngularJs. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.

So what is two-way binding? Let’s briefly explain it below.

First we need to understand data binding. The website pages we see are composed of two parts: data and design. Converting the design into a language that the browser can understand is what HTML and CSS mainly do. Displaying data on the page and having certain interactive effects (such as clicks and other user operations and corresponding page reactions) is the main job of js. Many times we cannot refresh the page (get request) every time we update data. Instead, we request relevant data from the backend and update the page (post request) by loading without refreshing. Then after the data is updated, the corresponding location on the page can automatically make corresponding modifications, which is data binding.

In the previous development model, this step usually uses jq to operate the DOM structure to update the page. But this brings a lot of code and a lot of operations. If we can determine the operations that need to be performed on the page from the data obtained from the backend at the beginning, when the data changes, the relevant content of the page will also automatically change, which will greatly facilitate the development of front-end engineers. In the new framework (angualr, react, vue, etc.), by monitoring the data, if changes are found, the page will be modified according to the rules that have been written, thus realizing data binding. It can be seen that data binding is a modification of M (model, data) to V (view) through VM (model-view, the transformation rule between data and pages).

The two-way binding adds a reverse path. When the user operates the page (such as entering a value in Input), the data can change in time, and according to the change in the data, corresponding modifications are made in another part of the page. A common example is the shopping cart in Taobao. When the quantity of goods changes, the price of the goods can also change in time. This achieves a two-way binding of V-M-VM-V.

AngularJs sets a listening queue on the scope model to listen for data changes and update the view. Every time you bind something to view (html), AngularJs will insert a $watch into the $watch queue to detect whether there are changes in the model it monitors. The $digest loop fires when the browser receives an event that can be handled by the angular context. $digest will iterate through all $watches. Thus updating the DOM.

$watch

This is somewhat similar to our observer pattern. Under the current scope $scope, we create a monitor $watchers and a listener$ watch, $watchers are responsible for managing all $watches. Every time we bind it to the UI, we will c858d69dd81008e347cd5f5447f8e393 automaticallye6e38b3c62e8df885fe2e3986461aa63 create a $watch and put it in $watchers.

controller.js

app.controller('MainCtrl', function($scope) {
 $scope.Hello = "Hello";
 $scope.world = "World";
});

index.html

<p>{{Hello}}</p>

Here, even if we add two variables to $scope, c858d69dd81008e347cd5f5447f8e393 but there is only one It is bound to the UI, so only one $watche6e38b3c62e8df885fe2e3986461aa63

$digest

can be processed by the angular context when the browser receives it. event, the $digest loop will trigger. $digest will traverse our $watches. If $watch has no changes, the loop detection will stop. If at least one has been updated, the loop will be triggered again until all $watches have no changes. This ensures that each model will not change again. This is the Dirty Checking mechanism

controller.js

app.controller('MainCtrl', function() {
 $scope.name = "Foo";

 $scope.changeFoo = function() {
  $scope.name = "Bar";
 }
});

index.js

<p>{{ name }}</p>
<button ng-click="changeFoo()">Change the name</button>

1. When we press the button

2. The browser receives an event and enters the angular context.

3. The $digest loop begins to execute, querying whether each $watch changes.

4. Because the $watch monitoring $scope.name reports a change, it will force another $digest cycle.

5. New $digest loop no changes detected.

6. Update the DOM corresponding to the new value of $scope.name.

$apply

$apply We can directly understand it as refreshing the UI. c858d69dd81008e347cd5f5447f8e393If you call $apply when the event is triggered, it will enter the angular context. If it is not called, it will not enter, and the subsequent $digest detection mechanism will not triggere6e38b3c62e8df885fe2e3986461aa63

app.directive('clickable', function() {
 return {
  restrict: "E",
  scope: {
  foo: '='
  },
  template: &#39;<ul style="background-color: lightblue"><li>{{foo}}</li></ul>&#39;,
  link: function(scope, element, attrs) {
  element.bind(&#39;click&#39;, function() {
   scope.foo++;
   console.log(scope.foo);
  });
  }
 }
});

When we call the clickable instruction, we can see that the value of foo has increased, but the content displayed on the interface has not changed. The $digest dirty detection mechanism is not triggered, and the $watch to detect foo is not executed.

Two forms of $apply() method

1) No parameters

$scope.$apply();

element.bind('click', function() {
 scope.foo++;
 //if error
 scope.$apply();
});

When we use this form, if the program occurs before scope.$apply Exception, then scope.$apply is not executed and the interface will not be updated

2) If there are parameters

$scope.$apply(function(){
 ...
})

element.bind('click', function() {
 scope.$apply(function() {
  scope.foo++;
 });
})

If you use this form, even if an exception occurs later, the data will still be updated.

Using $watch in AngularJS

Common usage:

$scope.name = 'Hello';
$scope.$watch('name', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
});

传入到$watch()中的第二个参数是一个回调函数，该函数在name的值发生变化的时候会被调用。

如果要监听的是一个对象，那还需要第三个参数：

$scope.data.name = 'Hello';
$scope.$watch('data', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
}, true);

表示比较的是对象的值而不是引用，如果不加第三个参数true，在 data.name 变化时，不会触发相应操作，因为引用的是同一引用。

总结

1) 只有在$scope变量绑定到页面上，才会创建 $watch

2) $apply决定事件是否可以进入angular context

3) $digest 循环检查model时最少两次，最多10次(多于10次抛出异常，防止无限检查)

4) AngularJs自带的指令已经实现了$apply，所以不需要我们额外的编写

5) 在自定义指令时，建议使用带function参数的$apply

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在javaScript中如何使用手机号码校验工具类PhoneUtils

在微信小程序中如何实现下载进度条

在微信小程序中如何使用video组件播放视频

在微信小程序中如何使用audio组件

在微信小程序中有关功能函数总结（详细教程）

The above is the detailed content of How to use two-way binding in AngularJs. For more information, please follow other related articles on the PHP Chinese website!