文档章节

谈angularJs中的apply()

own1991
 own1991
发布于 2017/08/28 11:39
字数 272
阅读 5
收藏 0

当触发事件click()及setTimeout(),$timeout这些要更新DOM要使用apply(),不然模板更新了,但DOM更新不了。  后台可以打印出来, 详细;http://blog.csdn.net/dm_vincent/article/details/38705099

还可以简单粗暴scope。scope.$apply()

<body ng-app="myApp">  
  <div ng-controller="MessageController">  
    Delayed Message: {{message}}  
  </div>    
</body>  

angular.module('myApp',[]).controller('MessageController', function($scope) {  
      
      $scope.getMessage = function() {  
        setTimeout(function() {  
          $scope.message = 'Fetched after 3 seconds';  
          console.log('message:'+$scope.message);  
        }, 2000);  
      }  
        
      $scope.getMessage();  
      
    });  

不起作用,以下改善。

angular.module('myApp',[]).controller('MessageController', function($scope) {  
      
      $scope.getMessage = function() {  
        setTimeout(function() {  
          $scope.$apply(function() {  
            //wrapped this within $apply  
            $scope.message = 'Fetched after 3 seconds';   
            console.log('message:' + $scope.message);  
          });  
        }, 2000);  
      }  
        
      $scope.getMessage();  
      
    });  

事件类型;

<body ng-app="APP">
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<p>{{message}}</p><input ng-model="message" />
<div><test-dw></test-dw></div>
</body>

var appd = angular.module("APP",[]);
        appd.directive("testDw", function(){
            return{
                //restrict:"A",
                //scope:true,
                restrict:"AE",
    	          template:"<div><button>点击</button><div>{{message}}</div></div>",
                //replace:true,
                link:function(scope, element, attrs){
                    element.bind("click", function(){
                        //scope.$apply(function(){
                            scope.message="这就对啦";
                            console.log(scope.message)
                        //})
                    } )
                },
            }
        })

改善,

<body >
<p>{{message}}</p><input ng-model="message" />
<div><test-dw></test-dw></div>
<script src="https://cdn.bootcss.com/angular.js/1.4.0-beta.4/angular-1.4.0-beta.5/angular.js"></script>
<script type="text/javascript">
    var appd = angular.module("APP",[])
        .directive("testDw", function(){
            return{
                restrict:"A",
                scope:true,
                template:"<div><button>点击</button><div>{{message}}</div></div>",
                //replace:true,
                link:function(scope, element, attrs){
                    element.bind("click", function(){
                        scope.$apply(function(){
                            scope.message="这就对啦";
                        })
                    } )
                }
            }
        })
</script>
</body>

 

 

© 著作权归作者所有

共有 人打赏支持
上一篇: 谈$watch()
own1991
粉丝 0
博文 61
码字总数 29561
作品 0
黄浦
私信 提问
$apply already in progress at Error

Search: Sort by: name age {{phone.name}} {{phone.snippet}} {{phone.age}} XMLHttpRequest cannot load file:///D:/ProgramFilesZhtt/tomcat1081/webapps/AngularJS/js/05.json. Cross or......

梦幻女侠
2013/10/11
1K
1
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
angular 调试时出现$http.get(...).success is not a function错误

我是angular 初学者,在调试时出现$http.get(...).success is not a function错误,我在网上找了一下,没有得到解决,求一下大神,帮我看一下出现了什么问题谢谢! 具体错误:TypeError: $h...

宸紫懿
2016/12/29
1K
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26

没有更多内容

加载失败,请刷新页面

加载更多

十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
29分钟前
2
0
Docker搭建代码质量检测平台-SonarQube(中文版)

Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量,可以从七个维度检测代码质量。通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言...

Jacktanger
36分钟前
2
0
Windows / Linux / MacOS 设置代理上网的方法汇总

本文汇总了 Windows / Linux / MacOS 设置代理上网的各种方法,总结如下: 1、设置系统代理(Windows、Linux、MacOS) 2、设置代理插件(Chrome、Chromium、Firefox、Opera、QQ等浏览器) 3、...

sunboy2050
昨天
4
0
自定义 Maven 的 repositories

有时,应用中需要一些比较新的依赖,而这些依赖并没有正式发布,还是处于milestone或者是snapshot阶段,并不能从中央仓库或者镜像站上下载到。此时,就需要 自定义Maven的<repositories>。 ...

waylau
昨天
3
0
徒手写一个es6代码库

mkdir democd demonpm initnpm install -g babelnpm install -g babel-clinpm install --save-dev babel-preset-es2015-node5 在项目目录创建两个文件夹 functional-playground ......

lilugirl
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部