【学】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]]]] ...
随机推荐
- [转载 ]POJ 1273 最大流模板
转载 百度文库花了5分下的 不过确实是自己需要的东西经典的最大流题POJ1273 ——其他练习题 POJ3436 . 题意描述: 现在有m个池塘(从1到m开始编号,1为源点,m为汇点),及n条水渠,给 ...
- iOS—Mask属性的使用
Mask属性介绍 Mask平时用的最多的是masksToBounds 吧. 其实除此以外Mask使用场景很多,看完之后你会发现好真是好用的不要不要的... 先来了解下Mask属性到底是什么? Mask ...
- 【Mocha.js 101】同步、异步与 Promise
前情提要 在上一篇文章<[Mocha.js 101]Mocha 入门指南>中,我们提到了如何用 Mocha.js 进行前端自动化测试,并做了几个简单的例子来体验 Mocha.js 给我们带 ...
- 如何全面解决ECSHOP的jquery冲突
主要就是Ecshop的AJAX传输类,transport.js中重写了object的对象原型,从而导致了与jq框架的冲突. 解决: 1. 删除transport.js中587行 - 636行中关于ob ...
- 如何书写高质量的jQuery代码
想必大家对于jQuery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQue ...
- T卡热插拔
1.配置: GPIO 管脚 GPIO方向 Debounce polarity Sensitive_level Host1 CDpin (EINT16) 16 INPUT PULL UP Enable ...
- web前后端框架整理
nodejs <——> Express <———> bootstrap <———> angularJS <————> jquery <—————& ...
- Nginx Debug Log
//检查nginx.conf时(sudo ./nginx -t),输出数据到检测结果 //ngx_conf_log_error(NGX_LOG_EMERG, cf, 0, "配置解析处理&q ...
- IE8利用setCapture和releaseCapture解决iframe的拖拽事件
最近有个需求须要实现左右拖拽功能,页面右边是个iframe页面,在chrome测试通过之后,发现在ie8上面效果不是很理想,最后查找资料得知可以使用ie自带的setCapture和releaseCap ...
- WebView返回时设置Title
private TextView mWebTitle; private com.tencent.smtt.sdk.WebView mX5Web; ......... if (mX5Web.canGoB ...