angularjs双向绑定原理是什么？

Z时代
2024-01-10
分类：综合

美女程序员鼓励师

AngularJS因是为开发者呈现一个更高层次的抽象来简化应用的开发而得到很多人的喜爱。它的数据驱动很有意思，AngularJS数据驱动是由双向绑定完成的。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。本文主要介绍angularjs双向绑定原理。

一、AngularJS的工作原理：

1、ngularJS启动，搜寻所有的指令(directive)；

2、到ng-app，搜寻其指定的模块(Module)，并将其附加到ng-app所在的组件上；

3、nguarJS遍历所有的子组件，查找指令和bind命令；

4、发现ng-controller或者ng-repeart，创建一个作用域(scope)；

5、添加对变量的监听器，并监控每个变量的当前值。

二、实例代码

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title></title>
 6 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
 7 </head>
 8 <body>
 9 <div ng-app="myApp" ng-controller="myCtrl">
10 名: <input type="text" ng-model="firstName"><br>
11 姓: <input type="text" ng-model="lastName"><br>
12 <br>
13 姓名: {{firstName + " " + lastName}}
14 </div>
15 </body>
16 <script>
17 var app = angular.module('myApp', []);
18 app.controller('myCtrl', function($scope) {
19 $scope.firstName = "王";
20 $scope.lastName = "二狗";
21 });
22 </script>
23 </html>