Bidirectional data binding for 2-angular (MV-VM)

Angular's core MVVM, here's a look at the MV (data to view).

<div ng-controller= "Aaa" >    <p>{{name}}</p></div><script type= "Text/javascript" >    function  Aaa ($scope) {     = ' Hello AngularJs ';  SetTimeout (　　function() {
= ' Hi ';   }, (a);     }; </script>

Execute the above code, we use settimeout delay two seconds to update the data (M), our view (V) has not changed.

The data actually changed , but our view (V) didn't refresh in time because the native settimeout didn't have the ability to refresh.

Angular provides us with a settimeout service, $timeout, the need to introduce the service in AAA!

<div ng-controller= "Aaa" >    <p>{{name}}</p></div><script type= "Text/javascript" >    function  Aaa ($scope, $timeout) {       $scope. Name = ' Hello AngularJs ';
$timeout (function() {   　　= ' Hi ';  }, (a);    }; <script>

This allows you to refresh the process of the view, M (data) to V (view).

What if I want settimeout to also have the ability to refresh the view? You can use the $apply Method!

<div ng-controller= "Aaa" >    <p>{{name}}</p></div><script type= "Text/javascript" >    function  Aaa ($scope) {        = ' Hello AngularJs ';        SetTimeout (function() {            $scope. $apply (function() {                = ' Hi ') ;}             )        ;}     <script>

Refresh view is also possible!

In an example:

<div id= "AAA" ng-controller= "AAA" ng-click= "Name= ' Hi '" >    <p>{{name}}</p></div>< Script type= "Text/javascript" >    function  Aaa ($scope) {       = ' Hello AngularJs ';    }; </script>

We bind a click event to an element with ID AAA and change the name value to hi when a click occurs.

Of course, you can also pass a function to achieve more functionality.

<div id= "AAA" ng-controller= "AAA" ng-click= "Show ()" >    <p>{{name}}</p></div><script Type= "Text/javascript" >    function  Aaa ($scope) {        = ' Hello AngularJs ';         function () {            = ' Hi ';        };    } </script>

See Click and believe you also know how to use the mouse to move in and out of these frequently used events.

Look at the last example, the process of V (view) to M (data).

<div ng-controller= "Aaa" >    <input type= "text" ng-model= "name"/>    <p>{{name}}</p> </div><script type= "Text/javascript" >    function  Aaa ($scope) {        = ' Hello AngularJs ';    }; </script>

We bind a ng-model on the input tag, this is the bound data, will be populated by default on the value of input, when our input value changes, the corresponding data in the $scope will also change, The values that affect the P tag in the view also change.

Learn notes, if there is insufficient, please correct me! Reproduced please keep the original link, thank you.

Finally, the micro-Bo powder, thank you.

Bidirectional data binding for 2-angular (MV-VM)