AngularJs双向数据绑定原理

时间 2019-12-01

原文原文链接

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操做。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好。双向数据绑定多是AngularJS最酷最实用的特性,将MVC的原理展示地淋漓尽致.html

AngularJS的工做原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,全部的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。所以, NG框架是在DOM加载完成以后, 才开始起做用的. 前端

在html中:web

<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 app
var app = angular.module("ngApp", [], function(){
	console.log("ng-app : ngApp");
});
// angular controller
app.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中的数据是一致的. 修改其一, 则对应的另外一端也会相应地发生变化.app

这样的方式,使用起来真的很是方便. 咱们仅关心HTML标签的样式, 及其对应在js中angular controller做用域下绑定的属性和方法. 仅此而已, 将众多复杂的DOM操做全都省略掉了.框架

这样的思想,其实跟jQuery的DOM查询和操做是彻底不同的, 所以也有不少人建议用AngularJS的时候,不要混合使用jQuery. 固然, 两者各有优劣, 使用哪一个就要看本身的选择了.htm

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对象的做用域隔离开来.