【学】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]]]] ...
随机推荐
- UVA 12549 - 二分图匹配
题意:给定一个Y行X列的网格,网格种有重要位置和障碍物.要求用最少的机器人看守所有重要的位置,每个机器人放在一个格子里,面朝上下左右四个方向之一发出激光直到射到障碍物为止,沿途都是看守范围.机器人不会 ...
- 【转】关于编写性能高效的javascript事件的技术
原文转自:http://blog.jobbole.com/80170/ 如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题.几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端 ...
- public/private/protected访问控制权限的区别
//public/private/protected访问控制权限的区别//时间:2016/8/16 //(一)修饰成员: //public: 在类内.类外都能使用 . //protected: 在类内 ...
- 【转载】Selenim入门环境的搭建--Java环境下的Java Maven Project
一.开发环境 操作系统: xp win7 win8 win10都可以 JDK: 1.6或者1.7 下载地址 JDK1.7下载 Eclipse: 官网下载比较新的版本,建议下载EE的版本 eclips ...
- 初用eclipse和svn遇见的问题以及解决方法
第一次用eclipse 首先用SVN输入URI出现报错 去百度查了一下 大致就两点问题 1.防火墙的问题 2.SVN服务没开 我两个问题都不存在就去请教大神得到解决方案 解决方案:把URI的机器名改成 ...
- eclipse中安装Open Explorer
刚刚解压的eclipse中一般没有下面如图所示的这个操作,不能快速进入所选中的文件在Windows资源管理器所在的目录 我们需要下载OpenExplorer.jar包,放到eclipse解压后的dro ...
- Surprise团队第一周项目总结
Surprise团队第一周项目总结 团队项目 基本内容 五子棋(Gobang)的开发与应用 利用Android Studio设计一款五子棋游戏,并丰富其内涵 预期目标 实现人人模式:2个用户可以在同一 ...
- Flex 监听浏览器关闭
在creationComplete的事件中,添加如下: if(ExternalInterface.available)//外部接口是否可用 { var js:String= " ...
- markdown 语法测试
understanding the linux kernel 绪论 linux支持.硬件依赖.版本 基于微内核的方法 支持内核线程 多线程应用支持 抢占式内核 硬件依耐性 file descripto ...
- cache manifest 格式
下面说明书写 cache manifest 文件需要遵循的格式.1 首行必须是 CACHE MANIFEST.2 其后,每一行列出一个需要缓存的资源文件名.3 可根据需要列出在线访问的白名单.白名单中 ...