关于angularjs中,数据模型被改变,页面不刷新的解决办法

刚用angularjs时,确实被它的双向数据绑定震住了,但同时没有完合使用angularjs的方法,从而出现数据模型被改变,但页面不能随之更改,需要$scope.$apply()强制更新数据模型.

实际上出现这种情况,就是因为在angularjs中使用了JS方法产生数据源,看下面代码:

var myApp = angular.module("myApp",[]);
myApp.controller("mainController", function ($scope) {
    $.get("/articlelist",{},function(data){
        $scope.data=data;
    });
    $scope.updatedate = function(id,age){
	$.get("/update",{id:id,age:age},function(data){
	    item.age=age;//这里你会发现值变了,但页面没刷新
	    $scope.$apply();//需要手动刷新
	    console.log(item);
	});
    }
});
很多人都用过这种方式来取值或更新数据,发现页面并没有随着更新而改变,需要手动刷新.

这是由于angularjs的watch不能监听到JS对$scope.data的更改.更改一下写法,就可以实现了

var myApp = angular.module("myApp",[]);
myApp.controller("mainController", function ($scope,$http) {
    $http.get("/articlelist").success(function(data){
        $scope.data=data;
    });
    $scope.updatedate = function(id,age){
	$http.get("/update?id="+id+"&age="+age).success(function(data){
	    item.age=age;//页面随着改变刷新
	});
    }
});
可能有人会说,JQUERY能跨域,其实angularjs也可以的.参考: NodeJS+ExpressJS解决跨域请求CORS




  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值