04、AngularJS的ng-bind、多个控制器和apply

  这篇,讲一下angularjs的ng-bind指令,多个控制器,以及手动触发angularjs的脏检查,我直接把代码贴,顺着代码讲。

  

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="ngApp">

<div ng-controller="firstController">
    <input type="text" ng-model="name"/>
    <div ng-bind="name"></div>
    <div ng-controller="secondController">
        <input type="text" ng-model="name"/>
        {{name}}
        {{date}}
    </div>
</div>
</body>
<script type="text/javascript" src="../public/javascripts/lib/angular.js"></script>
<script type="text/javascript">
    alert(123);
    var ngApp=angular.module(‘ngApp‘, []);
    ngApp.controller("firstController",function($scope){
        $scope.name="xixi";
    });
    ngApp.controller("secondController",function($scope){
        setInterval(function(){
            $scope.$apply(function(){
                $scope.date=new Date();
            });
        },1000);
    });
</script>
</html>

  1、ng-bind:在使用angularjs表达式{{name}}时,如果angularjs还没加载完毕,我们会看到页面直接把angularjs表达式当作字符串给渲染到html,这样显示不友好。这里推荐使用ng-bind,ng-bind在angularjs没有加载完毕的时候是不会解析执行的,一旦angularjs加载完毕的时候就会执行。运行上面的代码,在弹出alert的时候,起码没有使用ng-bind的地方就会直接显示angularjs的表达式,而是用了ng-bind的地方则是什么没有显示,关闭alert后,页面就显示了正常的数据。

  2、多个控制器:上面代码中,我们定义了两个控制器,firstController跟secondController,其中secondController是位于第一个firstController里面的,secondController里面没有name属性。我们在运行代码的时候,发现,第一个跟第二个控制器所控制的范围都显示了name的值,这是为什么呢?这其实跟javascript的作用域链是一样的。secondController里面没有找到name,就会往上一级找,刚好在firstController里面找打了name,所以两个控制器掌控的范围都显示了name的值。上面代码运行后,我们在第一个表单输入数值,发现,所以使用了name的地方都跟着变。而当在第二个表单,也就是第二个控制器掌控的作用域内,输入数值改变第二个控制器的model后,再在第一个表单输入值后,发现第二个的值不在变化了,这又是为什么呢?因为secondController此时内部会声明了name,而整个secondController运行的代码就在自己的作用域里面,同时由于上级的作用域是访问不到下级作用域的,所以不会影响secondController的值。注意,在第二个表单输入值,输入第一个表单的值,为啥第二个表单也跟着变呢?那是因为第二个表单往上面作用域寻找name变量,而不是第一个控制器所影响的。

  3、angularjs的apply:前面几篇的一些例子里面讲到,我们在控制器里面更改$scope的属性值,view也跟着变。但是,如果我们把上面代码的setInterval里面的$scope.$apply去掉,直接写上$scope.date=new Date(),这样页面的时间是不会改变的。这是因为控制器里面的$scope的属性值了,却没有进行属性的检查。大家应该知道,通常要知道一个变量是否更改,一般有两种情况,一是通过set调用赋值,二是通过脏检查,把原来的对象复制一份快照,在特定的时间,遍历现在的对象属性同快照的对象的属性一个一个的比较。这种策略要保留两份变量,且遍历对象比较每一个属性,这是有一定的性能问题的。在angularjs中,使用的就是脏检查这种策略。

  4、angularjs的脏检查策略:

    a) angularjs不会检查每一个对象,只有添加到html中的对象,才会添加为检查对象,即一个watcher。

    b) angularjs也不会检查每一个属性,只有属性被绑定以后,这个属性才会添加为检查属性。

    c) angularjs在初始化的时候,会为每一个对象的绑定属性添加为监听对象,即一个对象绑定了n个属性,则同时也就是添加了n个watcher。

  5、angularjs什么时候会进行脏检查呢?在angularjs系统中所有的方法,比如在controller初始化的时候,所以ng-开头的指令执行后都会触发脏检查。

  6、$apply手动触发脏检查。注意的时候,$apply只是进入了angularjs的执行上下文,真正触发脏检查的是$digest。在使用$apply的时候,如果不带参数,则会检查$scope里所有监听的属性,所以在使用的时候,建议带上参数。

  7、上面我们提到,出发脏检查的是$digest()方法,这个方法会出发$scope以及所有的子$scope的脏检查,而脏检查又出发了watcher,这样整个angularjs的数据双向绑定的机制就活起来了。虽然说触发脏检查的是$digest方法,但是不建议直接使用,而是建议使用$apply。$apply不是直接把信息传递给$digest的,而不是通过$eval这层过滤,如果$apply带的表达式不合法的话,$eval就会把错误发送给$exceptionHandler,只有合法的才会触发$digest,这样更加安全。

  本篇就写到这,后续会接着写angularjs其他方面的知识。

时间: 2024-10-12 08:30:09

04、AngularJS的ng-bind、多个控制器和apply的相关文章

AngularJS快速入门指南05:控制器

AngularJS控制器用来控制AngularJS applications的数据. AngularJS控制器就是普通的JavaScript对象. AngularJS控制器 AngularJS applications通过控制器进行控制. ng-controller指令定义了一个application的控制器. 一个控制器就是一个JavaScript对象,它可以通过标准的JavaScript对象构造函数来创建. <div ng-app="myApp" ng-controller=

转走进AngularJs(八) ng的路由机制

走进AngularJs(八) ng的路由机制 2013-12-19 我来说两句 收藏 我要投稿 今天心情不错~,公司请了个中医来给按摩拔罐刮痧,一套下来那个爽啊~,趁着精力充沛了解了下Angular的路由机制,在此分享出来与大家共同学习. 在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以

angularJS 第一天 使用模型与控制器绑定数据

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp&qu

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下

[angularjs] angularjs系列笔记(四)控制器

Scope作用域 Scope作用域是应用在HTML视图和Js控制器之间的纽带 Scope是一个对象,有可用的属性和方法 根作用域 所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有的html元素中 $rootScope是各个controller中scope的桥梁,用rootscope定义的值可以在各个控制器中使用 AngularJs控制器 AngularJs控制器控制AngularJs的数据 控制器的方法 AngularJs控制器通过$scope来分配变量,也可以使用

走进AngularJs(八) ng的路由机制

在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面上放一个大大的返回按钮,让用户点击返回来导航,但总是无法避免用户习惯性的点后退.解决此问题的一个方法是使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState(

AngularJS 笔记系列(四)控制器和表达式

控制器:在 Angular 中控制器是一个函数,用来向作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 使用方法: var app = angualr.module('app',[]); app.controller('testController',function($scope){ // do sth here }) 控制器的嵌套:在整个应用中都会有父级作用域存在,除了孤立作用域以外,所有作用域都通过原型继承而来.他们都可以访问父级作用域. 默认情况下,当 An

AngularJS测试二 jasmine测试路由 控制器 过滤器 事件 服务

测试应用 1.测试路由 我们需要检测路由是否在运作,是否找到了,或者是404了.我们要确认路由事件触发了,预期的模板是否真的加载了.既然路由会改变页面的地址(URL)和页面内容,我们需要检测路由是否被加载了,页面是否找到了,在这中间发生了什么. 一段简单的路由代码: angular.module('myApp', ['ngRoute']) .config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'vi

angularJs中ng一些内置的工具方法:

1.angular.equals: (1)两个参数满足===比较返回true;(2)两个参数是同一种类型,同时他们的每一个属性通过angular.equals都是返回true:(3)两个都是NAN(在js中虽然NAN==NAN为false,但是这里为true);(4)两个对象代表同一个正则表达式,如/abc/==/abc/(虽然在js中返回false) 2.angular.copy: 创建来源source的一个深度克隆对象,可以是一个对象或者数组.如果没有指定destination那么就会返回一