AngularJs $scope 里面的$apply 方法和$watch方法

简介:

Angular $scope 里面的$apply 方法

Scope提供$apply方法传播Model变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
     <head>
         <meta http-equiv= "Content-Type"  content= "text/html; charset=utf-8"  />
         <title>无标题文档</title>
         <script type= "text/javascript"  src= "angular.min.js" ></script>
     </head>
     <body>
       <div ng-app= "myApp" >
 
           <div ng-controller= "firstController" >
               {{name}}
 
 
           </div>
 
 
       </div>
       <script type= "text/javascript" >
           var  app = angular.module( "myApp" , []);
           app.controller( 'firstController' ,[ '$scope' , function ($scope){
 
               setTimeout( function (){
 
                   $scope.$apply( function (){
                       $scope.name= '李四' ;
                   });
 
 
               }, 2000);
               $scope.name= '张三' ;
 
           }]);
 
 
 
       </script>
        
     </body>
</html>

  2s 后更新name的值为李四

 

2. ng-click使用, 如下图,定义了一个changeName方法,点击后修改名字为王五

 

timeout的使用,如下图,不需要再写setTimeout.

 


本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/7090786.html,如需转载请自行联系原作者

目录
相关文章
|
8月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
JavaScript 测试技术
Vue3 响应式原理之scheduler、stop
这里引用一下 Vue 官方的经典测试用例来测试 scheduler 功能
289 0
Vue3 响应式原理之scheduler、stop
|
测试技术 调度
手写vue3源码——reactive, effect ,scheduler, stop 等
在上面的测试用例中,有两个关键的函数reactive和effect,一个是创建响应式对象,另一个则是收集依赖,这个测试用例有点大,一次性实现不太方便,咋们可以把这任务拆分为更小的模块(任务拆分),分别写两个测试用例来测试reactive和effect
手写vue3源码——reactive, effect ,scheduler, stop 等
react+hook+ts项目总结-ts中namespace命名空间
react+hook+ts项目总结-ts中namespace命名空间
129 0
|
JavaScript 前端开发
实战之AngularJS 的Scope和Service的深入应用心得
实战之AngularJS 的Scope和Service的深入应用心得
实战之AngularJS 的Scope和Service的深入应用心得
|
监控 JavaScript 前端开发
angularJS学习小结——$apply方法和$watch方法
angularJS学习小结——$apply方法和$watch方法
121 0
|
Java JavaScript C++
优化Angularjs的$watch方法
Angularjs的$watch相信大家都知道,而且也经常使用,甚至,你还在为它的某些行为感到恼火。比如,一进入页面,它就会调用一次,我明明希望它在我初始化之后,值再次变动才调用。这种行为给我们带来许多麻烦。
2157 0
|
JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
|
JavaScript 前端开发