您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
监视、jsonp、定时器、强制更新
发布时间：2019-08-09 10:33:06编辑：雪饮阅读（）
监视
angular中用watch可实现对一个变量的监视，如
控制器中定义：
app.controller('zhangsan',function($scope,$http){
$scope.$watch('num',function(){
alert('变了');
});
});
元素中调用：
<div ng-controller="zhangsan" ng-init='num=1;'>
<input type="text" ng-model='num'>
</div>
深度监视
和监视一样，只是在watch多传一个参数true
区别在于对引用地址数据监视，如数组，当数组中新增了元素时候数组本身没有被重新实例化，地址没有变，而对于普通变量来说被赋予一个新值则地址也变了。那么对于引用数据监视如：
控制器定义：
app.controller('zhangsan',function($scope,$http){
$scope.arr=[12,5,8];
$scope.$watch('arr',function(){
alert('变了');
console.log($scope.arr);
},true);
});
元素中调用 ：
<div ng-controller="zhangsan">
<button ng-click="arr.push(99)">按钮</button>
</div>
scope环境变量的强制更新
当在angular环境中使用到非angular语法时候会有出现scope环境变量被改但调用该环境变量的元素处不同步的现象，如
控制器定义 ：
app.controller('zhangsan',function($scope,$http){
$scope.a=0;
setInterval(function(){
$scope.a++;
console.log($scope.a);
},1000);
});
元素调用：
<div ng-controller="zhangsan">
<span>{{a}}</span>
</div>
出现此种现象可以使用angular所提供的环境变量应用方法apply即可，如：
控制器中定义：
app.controller('zhangsan',function($scope,$http){
$scope.a=0;
setInterval(function(){
$scope.a++;
$scope.$apply();
console.log($scope.a);
},1000);
});
angular定时器-setInterval
angular中也提供有自己独立于传统js的setInterval定时器，该定时器在实现变更scope环境变量时可以不用apply，如：
控制器定义：
app.controller('zhangsan',function($scope,$http,$interval){
$scope.a=0;
var timer=$interval(function(){
$scope.a++;
if($scope.a==100) $interval.cancel(timer)
},100);
});
angular定时器-setTimeout
同setInterval，也是angular独立于传统js的一个setTimeout
控制器中定义如：
app.controller('zhangsan',function($scope,$http,$timeout){
$scope.a=0;
var timer=$timeout(function(){
$scope.a++;
console.log($scope.a);
},1000);
//$timeout.cancel(timer);
});
jsonp
jsonp是为了实现跨域，其实普通的ajax只要服务端允许跨域访问，则也就可以实现跨域。总体来说无论三普通的ajax还是jsonp，能否跨域都是服务端说了算。
jsonp区别于普通ajax的是请求后服务端给返回的数据是以请求参数中所填写的回调函数名并将真实的json数据作为参数用js语法实现的一个纯字符串的js调用代码，示例如：
以百度提供的一个jsonp接口为例 ：
http://suggestion.baidu.com/su?cb=huidiao&wd=1
这里百度以cb作为前端传递回调参数的参数名，我们假定回调参数值为“huidiao”
则可以看到百度给我们返回的响应内容是 ：
huidiao({q:"1",p:false,s:["1688阿里巴巴批发网","163","12306","163邮箱登录","126","1688","126邮箱登录","17173","12306铁路客户服务中心","139邮箱登陆"]});
即执行huidiao方法并用真实返回的对象作为huidiao方法的参数的一个js语法返回
angular中jsonp的实现
控制器中定义如：
app.controller('zhangsan',function($scope,$http){
$scope.a='';
$scope.change=function(){
$http.jsonp('http://suggestion.baidu.com/su',{params:{
wd:$scope.a,
cb:'JSON_CALLBACK'
}}).success(function(json){
alert('成功了');
console.log(json);
}).error(function(){
alert('失败了');
});
}
});
元素中调用如：
<div ng-controller="zhangsan">
<input type="text" ng-model='a' ng-change='change()'/>
</div>
关键字词：监视,jsonp,定时器,强制更新,angular
上一篇：class、style、if等在angular中的使用
下一篇：自定义过滤器与指令