關於angularjs中,資料模型被改變,頁面不重新整理的解決辦法
阿新 • • 發佈:2019-01-29
剛用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的更改.更改一下寫法,就可以實現了
可能有人會說,JQUERY能跨域,其實angularjs也可以的.參考:NodeJS+ExpressJS解決跨域請求CORSvar 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;//頁面隨著改變重新整理 }); } });