道招

Angularjs的双向绑定

如果您发现本文排版有问题，可以先点击下面的链接切换至老版进行查看！！！

Angularjs的双向绑定

AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-bind)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。 在html中: [code lang="html"] <body ng-app="app"> <div ng-controller="CounterC"> <h3>{{cc}}</h3> <h3 ng-bind="cc"></h3> <button ng-click="counting()">递增</button> </div> </body> [/code] 在js中 [code lang="javascript"] angular.module("app",[]) .controller('CounterC',function($scope){ $scope.cc = 0; $scope.counting = function(){ $scope.cc++; } }) [/code] 如上,我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该CounterC的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定. 这样, 就实现了NG的双向数据绑定: 即HTML中呈现的view与AngularJS中的数据是一致的. 修改其一, 则对应的另一端也会相应地发生变化。 NG中的app相当于一个模块module, 在每个app中可以定义多个controller, 每个controller都会有各自的作用域空间,不会相互干扰。 [code lang="html"] <div> 单价： <input type="number" min=0 ng-model="price" ng-init="price = 299"><br> 数量： <input type="number" min=0 ng-model="quantity" ng-init="quantity = 1"><br> 总价： {{ quantity * price }} </div> [/code] 你会惊喜地发现, 甚至不用写一行的JS代码, 即可完成计算并在界面展示结果. 即: 在前端html中使用{{ }}括起来的变量, 是跟AngularJS中对应的controller作用域内的属性绑定在一起的. 实际上,{{}}等同于ng-bind指令, 即ng-bind="myData"就能将NG中的myData数据跟前端对应元素绑定在一起.这样的话, 可以非常方便地做到从NG中获取任意数据并实时展示在页面上了. 另外, $scope对象还提供了一个$apply方法, 用于进行html页面上的更新, 使用方式为: [code lang="javascript"] $scope.$apply(function(){ $scope.myValue = "NewValue"; }); [/code] $scope对象, 我们可以理解为NG框架中的一个作用域对象, 在该作用域内可以做到数据和视图的相互绑定, 同时又能与其他$scope对象的作用域隔离开来. 当然, $scope也可以实现继承, 这部分内容在以后接触NG框架中其他对象的时候再分别做记录.
更新时间：
上一篇：转载java String.split()函数的用法详解下一篇：AngularJs用ng-click,ng-if等轻松实现购物车功能

相关文章

浅析angular.bind

简单来说angular.bind函数是用来返回一个自己设定参数的函数。它有三个参数，其中第三个参数是可选的。第二个参数是被绑定的函数fn，第一个参数是第二个参数fn的上下文对象，用this调用。 阅读更多…

AngularJs用ng-click,ng-if等轻松实现购物车功能

用angulajs里面的 ng-model 实现input的默认值， ng-click 来实现点击，用 ng-if 来判断“购物车清单”是否需要显示，用 ng-repeate 来实现购物车里面的内容 阅读更多…

《 AngularJS深度剖析与最佳实践》安装front-jet失败

作者雪狼已经给出了解决方案，地址 估计学习这个的读者应该都能翻过去吧。 本人在此也写一下自己的安装经历吧。 我一开始买到书后就想安装front-jet，始终没有成功，之后再github上找源码无 阅读更多…

关注道招网公众帐号