1. 程式人生 > >關於angularjs中,資料模型被改變,頁面不重新整理的解決辦法

關於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