Home > Developer > Web Develop
Data--viewTwo-way binding is the most practical feature of angularjs, it saves a lot of code, so that we focus on data and views, without wasting a lot of code in the DOM listening, data synchronization, about two-way update, can see:
below, we use code to Implement. First of all, do not dwell on what is not understood, first to experience the effect of data binding.
View-dataHere we only demonstrate how to bind to the view after having the Data.
<!DOCTYPE HTML><HTMLNg-app= "App"><Head> <Scripttype= "text/javascript"src= "http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></Script> <Scripttype= "text/javascript"> varApp=Angular.module ("App", []); App.controller ("Ctrl", function($scope) {$scope. username='Zhang San'$scope. changename=function() {$scope. username='John Doe'; } }); </Script></Head> <Body> <DivNg-controller= "ctrl"> <Buttonclass= ' btnbtn-primary ' Ng-click= ' ChangeName (); '>username= ' John Doe '</Button> <!--the user may see the bound expression at the beginning of the page load - <Div>{{username}}</Div> <!--This binding does not occur in this case - <DivNg-bind= ' username '></Div> </Div> </Body></HTML>After clicking the button, the div content becomes John doe, and the effect
Click here to see the Effect.
Implementation mechanismIn the last example, when we look at the data changes, the view changes Automatically. So this example is, in turn, a change in the view that causes the data to change, so how do we know when the data changes, where we can show the data again with another Element.
<!DOCTYPE HTML><HTMLNg-app= "App"><Head> <Scripttype= "text/javascript"src= "http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></Script> <Scripttype= "text/javascript"> varApp=Angular.module ("App", []); App.controller ("Ctrl", function($scope) {$scope. username='Zhang San' }); </Script></Head> <Body> <DivNg-controller= "ctrl"> <inputtype= ' text 'Ng-model= ' username '/> <Div>{{username}}</Div> </Div> </Body></HTML>To see the Effect:
Click here to see the Effect.
Angular to the common Dom events, xhr events, and so on, in the package, triggering into the angular digest process.
Inside the digest process, the Rootscope begins to traverse and check all Watcher.Please refer to https://github.com/xufei/Make-Your-Own-AngularJS/blob/master/01.md article for Details.
ANGULARJS Study notes (iii) data bidirectional binding
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
