简述Angularjs的数据绑定

最近我们团队在编写教程，因该说是边学习变讲解。刚刚完成了angualrjs数据绑定的部分的教程编写，在这里做下记录。

单项数据绑定

angualr 有两种数据绑定得到方式来实现 V层 与 C层 之间数据的绑定。

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
	<p>{{name}}</p>
	Hello <span ng-bind="name"></span>!
</div>

上述代码中，一种数据绑定的方式是用双花括号，其中的name会与 controller中的 $scope.name 的name进行绑定。

另一种方式是使用angular的内置指令 ng-bind 来实现绑定。controller 中的变量会与 ng-bind="name" 中的name进行绑定。

data-bind

可以看到，我们的变量已经在显示出来了，说明我们成功的绑定了变量数据。

区别：

虽然说这两种方式都可以进行数据绑定，但是他们还是有一定的区别的。

由于我们在进行web项目开发的时候，很多情况下我们的页面会优先加载 index.html 文件，我们的html代码就放在这个文件下。所以这种情况下，使用 `` 可能会造成页面渲染还没有完成，而显示我们的原始代码的问题。

而使用 ng-bind 就不会有这种问题，他会等到页面渲染完成后在将最终的结果显示出来。

双向数据绑定

angularjs 的一个核心概念，双向数据绑定。

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

可以看到，我们又添加了一个 input 输入框，用 ng-model 来绑定controller中 $scope.name 的name变量。

towdatabind

当我们在input中输入时，神奇的现象发生了。我们发现，下面的内容也跟着改变了。

angularjs 在我们进行输入时，<input type="text" ng-model="name"> 中的name发生改变，这时，它会马上通知controller中 $scope.name 的name，让他改变。同样的，$scope.name 的name发生了改变，也会立即通知V层双花括号中的 name。
所以数据传输的顺序应该是V层->C层->V层。

我们把这种V->C->V的现象叫做双向数据绑定。

小结

本文中，我只对双向数据绑定做了最简单的示例，它还有很多很有趣的功能。相信在以后的前端开发的道路上，我还能看到双向数据绑定更多优点。

官方参考资料：
https://docs.angularjs.org/api/ng/directive/ngBind
https://docs.angularjs.org/api/ng/directive/ngClass