【学】AngularJS日记(3)- $apply(), run()方法
$scope.$apply()
方法可以强制$apply()
里运行的函数所改变的model
里的数据直接反应到view
里,因为在angular的环境中,有时会用到原生js或者jquery的时候,这些行为有时无法实现angular里的双向绑定机制,需要手动调用$scope.$apply()
,将这个行为(函数调用)外面包一层$scope.$apply()
。其实angular实现双向绑定的机制其实就是在内部添加的监视$watch
,然后自动调用了$scope.$apply()
,只是我们在用原生js或者jq的时候让angular
强制使用一次。
关于$apply()的具体原理和用法在下面这个地址有详细介绍,是翻译国外的文章的:
http://blog.csdn.net/dm_vincent/article/details/38705099
比如,下面这个写法用了原生的setTimout()
,其实是不起作用的,尽管name
的值在2.5秒
后改成了hi
,但是并没有在view
层显示出改变
var app = angular.module('myApp',[]);
app.controller('cont1',['$scope',function($scope){
$scope.name = 'hello';
setTimeout(function(){
$scope.name = 'hi';
},2500);
}]);
有2中办法可以解决。
方法一:注入angular
自带的$timeout
,并代替原生setTimeout
var app = angular.module('myApp',[]);
app.controller('cont1',['$scope','$timeout',function($scope,$timeout){ //注意这里要把$timeout注入参数里,并且写在数组前列
$scope.name = 'hello';
$timeout(function(){
$scope.name = 'hi';
},2500);
}]);
方法二:在setTimeout函数内部强制调用$scope.$apply()
app.controller('cont1',['$scope',function($scope){
$scope.name = 'hello';
setTimeout(function(){
$scope.$apply(function(){
$scope.name = 'hi';
});
},2500);
}]);
模块对象的run()方法使用,可以在不定义controller的情况下,在模块对象下直接在全局$rootScope下挂在变量,
var app = angular.module('myApp',[]);
app.run(['$rootScope',function($rootScope){ //这里注意写法,run()方法里是一个数组
$rootScope.name = 'hello';
}]);
<body>
{{name}} <!--这时的name是在全局环境下的name了,而并没有创建任何控制器-->
</body>
【学】AngularJS日记(3)- $apply(), run()方法的更多相关文章
- angularJs的run方法操作
省掉了控制器 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv= ...
- spring-boot-2.0.3启动源码篇五 - run方法(四)之prepareContext
前言 此系列是针对springboot的启动,旨在于和大家一起来看看springboot启动的过程中到底做了一些什么事.如果大家对springboot的源码有所研究,可以挑些自己感兴趣或者对自己有帮助 ...
- Hystrix的一个坑,queue中的run方法没有被执行?
今天学的时候随手测了一下Hystrix的queue的异步执行,发现执行queue之后,还没有打印run方法中的内容,程序就结束了: import com.netflix.hystrix.Hystrix ...
- 【pwn】学pwn日记——栈学习(持续更新)
[pwn]学pwn日记--栈学习(持续更新) 前言 从8.2开始系统性学习pwn,在此之前,学习了部分汇编指令以及32位c语言程序的堆栈图及函数调用. 学习视频链接:XMCVE 2020 CTF Pw ...
- 0040 Java学习笔记-多线程-线程run()方法中的异常
run()与异常 不管是Threade还是Runnable的run()方法都没有定义抛出异常,也就是说一条线程内部发生的checked异常,必须也只能在内部用try-catch处理掉,不能往外抛,因为 ...
- Angularjs 的 ngInfiniteScroll 的使用方法
Angularjs 的 ngInfiniteScroll 的使用方法 一.介绍 ngInfiniteScroll 是一个 AngularJS 的扩展指令,实现了网页的无限滚动的功能,也就是相当于页面滚 ...
- java synchronized修饰普通方法,修饰静态方法,修饰代码块,修饰线程run方法 比较
synchronized用于多线程设计,有了synchronized关键字,多线程程序的运行结果将变得可以控制.synchronized关键字用于保护共享数据. synchronized实现同步的机制 ...
- $watch监听数据变化和run方法
angular中$watch方法可以监听数据的变化. $scope.$watch('phone',function(){ $scope.phone.fre = $scope.phone.num> ...
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
随机推荐
- 关于break和continue的区别
//break是结束整个循环体,continue是结束单次循环 比方说: while(x++ < 10){ if(x == 3) { break; } printf("%d\r\n&q ...
- C#实现自动发送QQ消息
1.得打开需要发送的聊天窗口,最小化也可,聊天时不能是中文输入法2.然后AIO名就是窗口左上角的那个名称,括号和QQ号不要,那个名称可能是好友备注,群名称,讨论组名称等.3.发送消息要设置成按Ente ...
- Javascript 事件对象进阶(二)拖拽的应用 - 登录框的拖拽
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- linux驱动之USB驱动程序
1. USB是主从结构的 所有的USB传输,都是从USB主机这方发起:USB设备没有"主动"通知USB主机的能力. 例子:USB鼠标滑动一下立刻产生数据,但是它没有能力通知PC机来 ...
- New XAMPP security concept:错误解决方法
New XAMPP security concept:错误解决方法 (2014-03-06 16:07:46) 转载▼ 分类: php 在Linux上配置xampp后远程访问域名报错: New X ...
- 《一个 Go 程序系统线程暴涨的问题》结论
原文地址:https://zhuanlan.zhihu.com/p/22474724 作者的结论没写好,我来说两句.. 结论: Docker swarm自己有个函数,叫setTcpUserTimeou ...
- cocos3.12预编译android报错RuntimeJsImpl.cpp
从coco官网下载了cocos2d-x-3.12.zip,在gen-libs生成prebuilt时,mac ,ios 平台都正常,android报错: jni/../../Classes/ide-su ...
- 一个assert的写法
]; int assert_buf_len; #ifdef XXX_DEBUG #define assert(expr, ...) \ do{ \ if ((!(expr))) \ {\ char * ...
- Elasticsearch Network Settings
网络设置 Elasticsearch 缺省情况下是绑定 localhost.对于本地开发服务是足够的(如果你在相同机子上启动多个节点,它还可以形成一个集群),但是你需要配置基本的网络设置,为了能够在实 ...
- 【转】oracle内存分配和调优总结
转自 http://blog.itpub.net/12272958/viewspace-696834/ 一直都想总结一下oracle内存调整方面的知识,最近正好优化一个数据库内存参数,查找一些资料并且 ...