数据绑定是angularjs框架在视图与作用域之间建立的数据同步机制。所谓双向是指界面的操作能够实时同步到作用域中,作用域中的数据修改也能够实时回显到界面中。
ng-model指令
ng-model指令可以建立数据绑定,
ng-app用于启动angularjs应用,这时会创建一个名为$rootSocpe的作用域,该作用域为angularjs应用的根作用域
把ng-model指令作为属性添加到input标签中,此时angularjs会在$rootSocpe作用域中添加一个uname属性和input输入框绑定,在input输入内容时,angularjs会自动把输入的内容同步到作用域的uname属性中
{{uname}}为angularjs的表达式形式,可以访问angularjs作用域里的属性。同时angularjs还能够监视作用域中数据的变化,当数据发生变化时,页面显示内容也能够得到实时更新
ng-bind指令
ng-bind指令是和数据绑定相关的另一个指令,作用是实现作用域到视图的单项数据绑定,和表达式功能类似,可用于向界面中输出作用域中的数据如上面的
<div>{{uname}}</div>
可以替换为<div ng-bind="uname"></div>
或者
<div class="ng-bind:uname"></div>
在使用angularjs表达式的{{uname}}时如果遇到网络问题会导致angularjs加载缓慢,会看到游览器直接把angularjs表达式当作字符串渲染到页面中,用户体验不好,所以尽量使用ng-bind指令,他在angularjs没加载完毕的时候不会执行
angularjs中的mvc
angularjs中的mvc分别指模型,视图和控制器。其中angularjs内置的ng-controller指令可以对控制器对象实例化,作为标签的扩展属性使用
<div ng-controller="LoginController">
</div>
AngularJS框架遇到ng-controller指令时会根据ng-controller指令指定的控制器名称查找控制器构造方法,然后使用对应的构造方法实例化控制器对象,并将控制其依赖的对象注入控制器对象中。
在使用ng-controller指令实例化控制器时会产生一个新的作用域对象 同一个页面中可以使用多个ng-controller指令来实例化不同的控制器对象。但需要注意的是,每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始标签与结束标签之间的DOM元素建立数据绑定。下面我编写了一个例子
打开开发人员工具
本案例中,使用ng-controller指令实例化了两个控制器UserController和InfoContoller,AngularJS框架自动为每个控制器实例创建一个作用域对象,但是每个作用域对象只能与ng-controller所在的开始标签和结束标签之间DOM元素进行数据绑定,通过$log日至服务分别在usercontroller和infocontoller中输出$scope作用域对象的属性。由于用户名和密码输入框只能和usercontroller中的作用域对象进行数据绑定,因此在infocontoller控制器中输出作用域对象的name和pword
属性时输出对象为undefined
AngularJS应用中的DOM事件处理可以在控制器中完成,AngularJS框架为我们提供了一系列的事件绑定指令,这些指令是在原生的JavaScript事件名称前增加ng-前缀