angular js 中$apply()的使用

angular js的双向数据绑定,在开发中起到的作用灰常大,但是,并不是所有时候都能起作用。

找了下资料发现,双向数据绑定其实也就是当模型发生了变化的时候,重绘了DOM,使你看到数据被更新了,引发模型变化的情况有:

1,dom事件;

2,xhr响应触发回调;

3,浏览器的地址变化;

4,计时器触发回调;

以上的某一个情况发生,都会触发模型监控机制,同时调用了$apply方法,重绘了dom;通常情况下,我们使用的一些指令或服务,如$http,$timeout,$location等都会调用$apply方法,

从而使用dom被重绘,数据得到更新,实现了双向数据绑定。

而在有些情况下,比如回调里,

回调函数里执行的方法被不会触发$apply方法。假如当你点击打了比较input select radio等等,触发了模型监控,值也随之更新了。

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

function b(){

//方法1

$scope.b=‘b‘;

$scope.$apply();

//方法2

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

$scope.b=‘b‘;

})**/

}

时间: 12-21

angular js 中$apply()的使用的相关文章

对于Angular JS中$apply()的理解

最近在学angularjs知识,在网上找到这篇文章,来自于:http://my.oschina.net/u/1402334/blog/500683,解决了我目前面临的一些问题,感觉收获很大,特此转过来做个记录: Angular最引人注目的特性就是双向绑定,然而它是怎么做到的,我可以来总结两点: 将变化的数据从model传向view-->$apply 将变化的数据从view传向model-->$watch 这连个函数都是基于scope的基础上,对scope对象的成员变化状况进行传播的.那么,我不

angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. ‘参数’ 就是$scope对象下的一个对象

angular.js的路由和模板在asp.net mvc 中的使用

我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.asp.net mvc 的路由是通过不同的URL到不同的controller然后交给controller去呈现视图.但是在angular.js则是需要提前指定一个module(ng-app),然后去定义路由规则,通过不同的URL,来告诉ng-app 去加载哪个页面.再渲染到ng-view.通过angular.js路由的使用,可以很容易实现页面的局部刷新.更加高效的去创建

用Trigger.io改进移动Angular.js应用

用Trigger.io改进移动Angular.js应用 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs Trigger.io Forge可以让我们使用最新.最好的Web技术来开发本地移动应用.本文展示了开发一个简单的Angular.js应用示例,并使用Forge模块增强此应用,包括:1)使用forge.prefs来增加离线能力和持久化能力2)使用forge.topbar来增加本地topbar和动作按钮3)使用forge.tabbar来实现视图间的导航

Angular.JS 之 全局对象变更的实时响应

AngularJS是一款来自Google的前端JS框架,体积非常小,但是设计理念和功能却非常强大. 教程 AngularJS中文社区 问题 在一款Web应用中,虽然我们尽可能的避免无节制地使用全局变量,但有时确实需要一些全局变量的存在已保证在所有页面中都能处理某些事件. 在本文的例子中,该应用需要在安卓平台上接收手机短信并实时响应(此处先撇开具体的实现插件,接收和发送短信都用控制台来模拟),为此我们定义了一个JavaScript的全局对象如下: 1 var native_accessor = {

socket.io+angular.js+express.js做个聊天应用(四)

接着上一篇 使用angularjs构建聊天室的client <!doctype html> <html ng-app="justChatting"> <head> <meta charset="UTF-8"> <title>justChatting</title> <link rel="stylesheet" href="/bower_components/b

Angular JS中$timeout的用法及其与window.setTimeout的区别

$timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行. 如果需要取消一个timeout,调用$timeout.cancel(promise)方法. 用法: $timeout(fn, [delay], [invokeApply]): fn: 回调函数(必填) delay: number类型.延迟的时间(非必填),如果

Angular JS赶快学起来(上)

               Angular JS赶快学起来(上) 我将分为上下两篇来介绍Angular JS,废话不多说,直接看内容吧... 一:首先,什么是Angular JS呢? - 一个前端框架,提供一种无DOM操作的编程方式,在前端页面中引入了传统在后台开发中使用的一些思想,增强代码的结构和可维护性 - 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 - 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 - MVC的特性增

七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX

这是"AngularJS - 七步从菜鸟到专家"系列的第三篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.第二篇我们讨论了scope和 $scope 的功能. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看这里. 第三部分 数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立