【学】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]]]] ...
随机推荐
- 以策略为导向的VI设计
从美学角度评价一个标志(LOGO)不是最佳方法,标志设计不是为了参加选美.标识要求除了审美功能外还应包括很多元素. 要说标志,先从CIS(企业形象系统)开始入手,里面分成MI.VI和BI,分别指企业的 ...
- 用python+selenium抓取知乎今日最热和本月最热的前三个问题及每个问题的首个回答并保存至html文件
抓取知乎今日最热和本月最热的前三个问题及每个问题的首个回答,保存至html文件,该html文件的文件名应该是20160228_zhihu_today_hot.html,也就是日期+zhihu_toda ...
- MSP430 IO 使用
MSP430内部上拉下拉使用注意——IO口测高低电平 MSP430单片机IO口用来检测高低电平时,是不需要外部上拉下拉的,因为其内部有上拉和下拉.在用作高低电平检测时,需要开启上拉或下拉. ...
- 搞懂 SynchronizationContext
SynchronizationContext -MSDN 很让人失望 我不知道为什么,目前在.Net下关于这个类只有很少的资料.MSDN文档也只有很少的关于如何使用SynchronizationCon ...
- folly::AtomicHashmap源码分析(一)
本文为原创,转载请注明:http://www.cnblogs.com/gistao/ Atomic的两点背景 看下这个场景,老张去厕所,发现门是锁着的,他就在门口等着里边人出来,此时小王也来了,他想了 ...
- 页面加载完后自动执行一个方法的js代码
1.在body中用onload: <body onload="conver()"> 2.在脚本中用window.onload: <script type=&quo ...
- dotproject 2.1.8 甘特图中文乱码解决
1.安装中文语言包 下载地址为http://www.dotproject.net/dpDownloads/Language_Packs/Chinese_Simplified_(GBK)/dotproj ...
- 跨服务器的session共享
四种 一.NFS(Net FileSystem): sun公司提供的,并发处理的效率不高,但操作方便 二.基于数据库的session共享 三.基于cookie的session共享 原理:将sessio ...
- iOS不使用JSONKit做Dic到JsonString的转换
NSDictionary to jsonString [self DataTOjsonString:dic] -(NSString*)DicToJsonString:(id)object { NSSt ...
- flex4
今天发现了一个问题:昨天把序列号输入之后可以用了,但是再次打开软件之后还是要求输序列号的.遇到这种情况的朋友可以这样操作.打开C:\WINDOWS\system32\drivers\etc这个目录,修 ...