一、作用域 Scope
1.1 什么是作用域
基于动态绑定,我们可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在其发生变化时立刻重新渲染视图。
AngularJS将$scope设计成和DOM类似的结构,因此$scope可以进行嵌套,也就是说我们可以引用父级$scope中的属性。
1.2 作用域的作用
作用域有如下基本功能:
1、提供观察者$watch以监视数据模型的变化
2、可以将数据模型的变化通知$digest给整个应用,甚至是系统外的组件;
3、可以进行嵌套,隔离业务功能和数据;
4、给表达式提供运算时所需的执行环境。作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头。可以将作用域理解成视图模型(view model)。
1.3 顶级作用域$rootScope
AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定,一般在html上来设置ng-app应用。$rootScope是所有$scope对象的最上层。
通过run()方法可以对rootScope设置属性和方法
例:
angular.module('app',[]).run(function($rootScope) {
$rootScope.name = "张三";
});
二、数据绑定
在angular中,通过ng-model指令,ng-bind指令,以及{{}}表达式都可以将应用中的数据绑定到视图中。
1)、ng-model指令
ng-model指令通常用在表单input元素中进行数据绑定。
如下:将scope中的name数据值与input框进行了绑定,因为angular的双向绑定机制,在input框中输入值会实时的同步到model中去,使下面的{{name}}表达式的值跟着变化。
<div ng-controller="myCtrl1">
<input type="text" ng-model="name" value="">
<p>{{name}}</p>
</div>
2)、ng-bind指令
ng-bind指令的作用在于将数据绑定到父元素上,使其内部显示为想要的数据
注意:ng-bind是绑定的元素,内部内容将被替换成绑定的数据。(所以最好不要在使用ng-bind指令的元素内部写其他内容)
<div ng-controller="myCtrl2" ng-bind="name">
<h1>111</h1>
</div>
如上:111会被替换成name对应的值
3)、表达式{{expression}}
通过表达式可以简单的将应用中的数据绑定到页面视图中。
angular中的数据双向绑定
AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding),这个特性大大简化了我们的代码编写方式。数据绑定意味着当View中有任何数据发生了变化,那么这个变化也会自动地反馈到scope的数据上,也即意味着scope模型会自动地更新。类似地,当scope模型发生变化时,view中的数据也会更新到最新的值。那么AngularJS是如何做到这一点的呢?
译文:
http://blog.csdn.net/dm_vincent/article/details/38705099?utm_source=tuicool&utm_medium=referral实现angular双向绑定的关键点:$watch函数和$digest()循环
1)、watcher
在$scope中有一个$watch()方法(或者说在$scope这个对象上,有一个叫$$watcher对象,它负责监视数据的改动)
\$watch()函数
它有两个参数:
参数一:监视的数据名,
参数二:数据发生变化时的回调函数。
watcher通过调用回调函数,来实现视图更新
2)、$digest()循环检查
watch只是负责监测数据变化,而真正触发它的回调函数执行的操作则是通过$digest()来完成的。
angular通过其脏检查机制(Dirty Checking),每隔一定时间就开始一次\$digest()循环检查。在每次\$digest循环中,会调用\$watch()来检查其对应的数据是否发生变化(每定义一条数据就会自动注册一个watcher),如果数据发生了变化就会触发其对应的回调函数来更新视图。
实例:
在angular中使用非angular自有的函数来改变其model数据时,是不会同部到视图层中的。
如下:
app.controller('myCtrl2',function($scope){
$scope.name="李四";
//定时器3秒后触发,改变name的值,但页面中的数据还是原来的值(李四)
window.setTimeout(function(){
$scope.name="小五";
console.log($scope.name); //小五
},3000)
})
改进:通过手动触发$digest(),来通过watcher回调函数改变数据
app.controller('myCtrl2',function($scope){
$scope.name="李四";
window.setTimeout(function(){
$scope.name="小五";
console.log($scope.name);
$scope.$digest(); //手动通知
},3000)
})