In-depth study of the two-way Data Binding Mechanism in AngularJS

This article mainly introduces the two-way Data Binding Mechanism in AngularJS. Bidirectional binding makes the view displayed in HTML consistent with the data in AngularJS and is one of the important features of Angular, for more information, see Angular JS (Angular. JS) is a set of frameworks, templates, and data binding and rich UI components used to develop web pages. It supports the entire development process and provides a web application architecture without manual DOM operations. AngularJS is very small and only 60 kb. It is compatible with mainstream browsers and works well with jQuery. Two-way Data Binding may be the coolest and most practical feature of AngularJS, demonstrating the principles of MVC.

The working principle of AngularJS is that the HTML template will be parsed to the DOM by the browser, and the DOM structure will become the input of the AngularJS compiler. AngularJS will traverse the DOM template to generate corresponding NG commands. All commands are responsible for setting data binding for view (ng-model in HTML. Therefore, the NG framework starts to take effect after the DOM is loaded.

In html:

In js:

// angular appvar app = angular.module("ngApp", [], function(){ console.log("ng-app : ngApp");});// angular controllerapp.controller("ngCtl", [ '$scope', function($scope){ console.log("ng-controller : ngCtl"); $scope.myLabel = "text for label"; $scope.myInput = "text for input"; $scope.btnClicked = function() {  console.log("Label is " + $scope.myLabel); }}]);

As shown above, we first define an angular app in html and specify an angular controller, the controller corresponds to a scope (you can use the $ scope prefix to specify attributes and methods in the scope ). then, the value or operation of the HTML Tag within the scope of the ngCtl can be bound to the attributes and methods in js through $ scope.

In this way, NG's bidirectional data binding is implemented: that is, the view displayed in HTML is consistent with the data in AngularJS. If you modify one, the other end will change accordingly.

This method is really convenient to use. we only care about the HTML Tag style and its attributes and Methods bound under the angular controller scope in js. that's all. All the complicated DOM operations are omitted.

In fact, this idea is completely different from jQuery's DOM query and operations. Therefore, many people suggest using AngularJS instead of using jQuery together. of course, the two have their own advantages and disadvantages.

The app in NG is equivalent to a module. Multiple controllers can be defined in each app, and each controller has its own scope space without interfering with each other.

How does Binding data take effect?
AngularJS beginners may step on such a pitfall. assume there is a command:

var app = angular.module("test", []); app.directive("myclick", function() {  return function (scope, element, attr) {    element.on("click", function() {      scope.counter++;    });  };}); app.controller("CounterCtrl", function($scope) {  $scope.counter = 0;});  
    increase      

At this time, click the button and the number on the interface will not be added. Many people may be confused, because he looked at the debugger and found that the data has indeed increased. Isn't Angular a two-way binding? Why is the data changed and the interface is not refreshed?

Try to add scope. digest () next to scope. counter ++?

Why? Under what circumstances? We found that there is no digest in the first example, And if you write digest, it will throw an exception saying that other digest is being done. What is the problem?

Let's first think about how to implement this function without AngularJS?

      
     Two-way binding        Increase 1    Increase 2