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,如需转载请自行联系原作者

目录
相关文章
|
6月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
JavaScript
Angular1.x的自定义指令directive参数配置详细说明
Angular1.x的自定义指令directive参数配置详细说明
|
JavaScript 前端开发 编译器
TS_React:Hook类型化
依赖类型推断 类型化 useState 类型化 useReducer 类型化 useRef 类型化 forwardRef 类型化 useEffect 和 useLayoutEffect 类型化 useMemo 和 useCallback 类型化 useContext 类型化自定义hook
TS_React:Hook类型化
|
测试技术 调度
手写vue3源码——reactive, effect ,scheduler, stop 等
在上面的测试用例中,有两个关键的函数reactive和effect,一个是创建响应式对象,另一个则是收集依赖,这个测试用例有点大,一次性实现不太方便,咋们可以把这任务拆分为更小的模块(任务拆分),分别写两个测试用例来测试reactive和effect
手写vue3源码——reactive, effect ,scheduler, stop 等
|
JavaScript 前端开发
实战之AngularJS 的Scope和Service的深入应用心得
实战之AngularJS 的Scope和Service的深入应用心得
实战之AngularJS 的Scope和Service的深入应用心得
|
监控 JavaScript 前端开发
angularJS学习小结——$apply方法和$watch方法
angularJS学习小结——$apply方法和$watch方法
112 0
|
JavaScript
AngularJs错误http://errors.angularjs.org/1.2.9/$injector/unpr?p0=...
AngularJs错误http://errors.angularjs.org/1.2.9/$injector/unpr?p0=...
84 0
优化Angularjs的$watch方法
Angularjs的$watch相信大家都知道,而且也经常使用,甚至,你还在为它的某些行为感到恼火。比如,一进入页面,它就会调用一次,我明明希望它在我初始化之后,值再次变动才调用。这种行为给我们带来许多麻烦。
2151 0
|
JavaScript 前端开发
|
JavaScript 前端开发