猿问
下载APP

请问AngularJS的数据双向绑定是怎么实现的?

AngularJS的数据双向绑定是怎么实现的


噜噜哒
浏览 70回答 3
3回答

烙印99

angular并不存在定时脏检测。angular对常用的dom事件,xhr事件等做了封装, 在里面触发进入angular的digest流程。在digest流程里面, 会从rootscope开始遍历, 检查所有的watcher。angular性能优化心得谈起angular的脏检查机制(dirty-checking), 常见的误解就是认为: ng是定时轮询去检查model是否变更。其实,ng只有在指定事件触发后,才进入$digest cycle:DOM事件,譬如用户输入文本,点击按钮等。(ng-click)XHR响应事件 ($http)浏览器Location变更事件 ($location)Timer事件($timeout, $interval)执行$digest()或$apply()

喵喵时光机

Angular js (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好。双向数据绑定可能是angularjs最酷最实用的特性,将MVC的原理展现地淋漓尽致.AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的.在html中:<body ng-app="ngApp"><div ng-controller="ngCtl"><label ng-model="myLabel"></label><input type="text" ng-model="myInput" /><button ng-model="myButton" ng-click="btnClicked"></button></div></body>在js中:// angular appvar app = angular.module("ngApp", [], function(){console.log("ng-app : ngApp");});// angular controllerapp.controller("ngCtl", [ '$scope', function($scope){console.log("ng-controller : ngCtl");$scope.myLabel = "text for label";$scope.myInput = "text for input";$scope.btnClicked = function() {console.log("Label is " + $scope.myLabel);}}]);如上,我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该ngCtl的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定.这样, 就实现了NG的双向数据绑定: 即HTML中呈现的view与AngularJS中的数据是一致的. 修改其一, 则对应的另一端也会相应地发生变化.这样的方式,使用起来真的非常方便. 我们仅关心HTML标签的样式, 及其对应在js中angular controller作用域下绑定的属性和方法. 仅此而已, 将众多复杂的DOM操作全都省略掉了.这样的思想,其实跟jquery的DOM查询和操作是完全不一样的, 因此也有很多人建议用AngularJS的时候,不要混合使用jQuery. 当然, 二者各有优劣, 使用哪个就要看自己的选择了.NG中的app相当于一个模块module, 在每个app中可以定义多个controller, 每个controller都会有各自的作用域空间,不会相互干扰.看下边这段html:<div ng-app="dataApp">单价: <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>你会惊喜地发现, 甚至不用写一行的JS代码, 即可完成计算并在界面展示结果.即: 在前端html中使用{{ }}括起来的变量, 是跟AngularJS中对应的controller作用域内的属性绑定在一起的. 实际上,{{}}等同于ng-bind指令, 即ng-bind="myData"就能将NG中的myData数据跟前端对应元素绑定在一起.这样的话, 可以非常方便地做到从NG中获取任意数据并实时展示在页面上了.另外, $scope对象还提供了一个$apply方法, 用于进行html页面上的更新, 使用方式为:$scope.$apply(function(){$scope.myValue = "NewValue";});$scope对象, 我们可以理解为NG框架中的一个作用域对象, 在该作用域内可以做到数据和视图的相互绑定, 同时又能与其他$scope对象的作用域隔离开来.当然, $scope也可以实现继承, 这部分内容在以后接触NG框架中其他对象的时候再分别做记录

扬帆大鱼

Angular js (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好。双向数据绑定可能是angularjs最酷最实用的特性,将MVC的原理展现地淋漓尽致.AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的.在html中:<body ng-app="ngApp"><div ng-controller="ngCtl"><label ng-model="myLabel"></label><input type="text" ng-model="myInput" /><button ng-model="myButton" ng-click="btnClicked"></button></div></body>在js中:// angular appvar app = angular.module("ngApp", [], function(){console.log("ng-app : ngApp");});// angular controllerapp.controller("ngCtl", [ '$scope', function($scope){console.log("ng-controller : ngCtl");$scope.myLabel = "text for label";$scope.myInput = "text for input";$scope.btnClicked = function() {console.log("Label is " + $scope.myLabel);}}]);如上,我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该ngCtl的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定.
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答