angularJs的双向数据绑定，简单实用_angularjs双向数据绑定是-CSDN博客

本文链接：https://blog.csdn.net/zwr20105255/article/details/70050338

angularJs最大的特点就是双向数据绑定。所谓双向数据绑定，简单的理解就是当js里的变量被改变时，前端页面就会立即同步显示出来，且这个过程类似于ajax的局部刷新，浏览器的地址栏看不到一点变化；反过来，当在前端页面改变了变量的值，那么js里该变量的值也会跟着改变，所以说这是双向的。它的原理就是脏数据检查。

请看下面一个简单的例子，三步走：
（1）在页面的头部引入angularJs，保险起见，一般在头部引入，如：

	<script src="js/angular.js"></script>

（2）定义模块和控制器，如：

<script>
var m = angular.module("webApp",[]);//a
m.controller("ctrl",["$scope",function($scope){//b
$scope.name = "lis";
}])
</script>

说明：a行的写法基本是固定的，当然模块名webApp随便取，如果要引入需要的模块，就在方括号里引入即可，模块要用双引号或单引号引起来。
b行是定义控制器，控制器名随便取，方括号可以不要，加入方括号是为了避免代码压缩可能引起的错误，所以建议加入方括号。$scope是引入的服务，类似于作用域。通过$scope定义的变量，只在本页面内有效，类似于局部变量；而通过$rootScope定义的变量，在整个项目里都有效，类似于全局变量。然后在方法体里就可以定义变量和其他方法了。

（3）在页面里写上刚刚定义的模块和控制器，如：

<body ng-cloak ng-app="webApp" ng-controller="ctrl">
<input type="text" ng-model="name" /><br />
目前输入的值为：{{name}}
</body>

结果：

刚刚进入：

输入值后：

可以看到只要输入框的值发生改变，框外的值也会同步改变。