文档章节

angularjs 之$apply()【集成自他人】

安吉拉
 安吉拉
发布于 2017/08/17 10:24
字数 479
阅读 5
收藏 0

angularjs的双向数据绑定很强大,但并非所有时候都起作用。

双向数据绑定其实就是当模型发生变化的时候重绘DOM,使看到的数据更新,模型发生变化。

1.DOM事件  

2.xhr响应触发回调

3.浏览器地址发生变化

4。计时器触发回调

以上某一种情况的发生都会触发模型监控机制,同时调用$apply()方法重绘DOM。通常情况下我们使用的一些指令服务会自动触发$apply()的调用,比如$http $location $timeout。还有视图中的指令也可调用,所有ng-[event]指令(ng-click ng-keypress)都会内部调用

但是有些时候是不会调用的。

1,在回调函数里执行的方法不会触发

此时需要手动调$scope方法,使dom重绘。

function b(){

//方法1

$scope.b='b';

$scope.$apply();

//方法2

/**$scope.$apply(function(){

  $scope.b='b';

})**/

}

2,在使用第三方库的时候

我们使用第三方框架比如(jquery),或者调用setTimeout()都可以使用$apply()函数让angular返回一个$digest循环

当我们将jQuery和Angular集成在一起时(这通常被视为一个肮脏的行为),就需要使用$apply(),因为Angular不会察觉到执行在Angular上下文外部的事件。例如,在使用jQuery插件时(比如datepicker),就需要使用$apply()将来自jQuery的值传递到Angular应用中

在这里,我们构建了一个简单的指令(第10章深入探索了如何构建指令),指令中我们在元素上使用了datepicker这个jQuery插件方法。

datepicker插件暴露了一个onSelect事件,这个事件会在用户选择日期时触发。为了在Angular应用内部获取用户选择的日期,我们需要在$apply()函数内运行datepicker的回调函数

© 著作权归作者所有

共有 人打赏支持
安吉拉
粉丝 1
博文 35
码字总数 7547
作品 0
Angularjs的$apply及其优化使用

今天,我们要聊得是Angularjs中的小明星$apply。当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply(),然后就惊喜...

北辰狼月
07/01
0
0
angularjs学习:$digest

angularjs扩展了javascript的事件流程机制:它会扩展这个标准的浏览器流程,创建一个Angular上下文。这个Angular上下文指的是运行在Angular事件循环内的特定代码,该Angular事件循环通常被称...

Jack_Q
2015/06/04
0
0
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608
04/19
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
AngularJs学习笔记--concepts(概念)

启动(Startup) 下面描述angular是如何启动的(参考图表与下面的例子): 1. 浏览器加载HTML,将HTML标签转换为DOM对象; 2. 浏览器加载angular.js的脚本; 3. Angular等待DOMContentLoade...

武文海
2015/02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
9
0
现场看路演了!

HiBlock
昨天
19
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
13
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
20
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部