AngularJS-模板和数据绑定

您可自由转发此文， 但请保留出处：Ionic在线学习网站  http://www.ioniconline.com

数据绑定是AngularJS最大的特色。在Angular中，视图和模型的数据不仅是双向绑定的，并而且是实时的，我们可以在Angular Controller的$scope中声明数据模型，在模板中进行绑定。

数据 --->模板：

数据到表现的绑定，主要是使用模板标记直接完成的。使用 {{ }} 这个标记，就可以直接引用，并绑定一个作用域内的变量。

模板 --->数据：

模板到数据的绑定，主要是通过 ng-model 来完成的：

Scope：

scope在Angular中代表着应用模型，它是模板中表达式的上下文。在scope中，我们可以watch（监听）表达式值的变化，可以传播事件。 在编写控制器时，我们往往会注入一个$scopeService来设置当前模板的上下文：

var app = angular.module('helloApp', []);       

app.controller('helloCtrl', ['$scope', '$http', function($scope, $http) {

   // 在模板上下文中添加变量：name

   $scope.name = '21ke';

}]);

然后在视图中绑定它：

<div ng-app='helloApp' ng-controller='helloCtrl'>

<input type='text' ng-model='name'>

<span ng-bind='name'>

</div>

ng-model设置了input内容和当前上下文中username之间的双向绑定；ng-bind设置了从上下文到span内容的绑定。 当我们在input中输入时，span的内容便会实时地改变。