首页 > 代码库 > $watch叫做数据脏检查，用来检测angular数值变化

$watch叫做数据脏检查，用来检测angular数值变化

2024-10-09 23:00:39   217人阅读

每次添加数组到$scope.a中:

 1 <!DOCTYPE html>
 2 <html ng-app="atr">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="angular.min.js"></script>
 7         <script>
 8             var app=angular.module(‘atr‘,[]);
 9             app.controller(‘test‘,function($scope){
10                 $scope.a=[1,2,3,4];
11                 $scope.$watch(‘a‘,function(){
12                     alert(‘变化了‘)
13                 },true)
14             })
15         </script>
16     </head>
17     <body>
18     <div ng-controller="test">
19      <input type="button" ng-click="a.push(5)" value="按钮"/>
20      <div>{{a}}</div>
21     </div>
22     </body>
23 </html>

 

利用$watch特性可以做一些jsonp跨域的功能：

 1 <!DOCTYPE html>
 2 <html ng-app="atr">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="angular.min.js"></script>
 7         <script>
 8             var app=angular.module(‘atr‘,[]);
 9             app.controller(‘test‘,function($scope,$http){
10                 $scope.keyup=function(){//按下键盘时添加事件
11                     $http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=‘+$scope.inp+‘&cb=JSON_CALLBACK‘)//百度搜索接口
12                     .success(function(data){//返回一段数组，可以用console.log打印到后台取出
13                          $scope.a=data.s;
14                     }).error(function(s){
15                         alert(s)
16                     })
17                 }
18             })
19         </script>
20     </head>
21     <body ng-controller="test">
22         <input type="text" ng-model="inp" ng-keyup="keyup()"/>
23          <ul>
24              <li ng-repeat="value in a">{{value}}</li>//打印到页面
25          </ul>
26     </body>
27 </html>

 

angular是当前最流行的数据交互插件。能实现很多功能。

 

$watch叫做数据脏检查，用来检测angular数值变化


联系
我们