AngularJS中使用$.ajax繫結失敗的處理方法
阿新 • • 發佈:2019-01-10
使用AngularJS中的$http服務來獲取資料的時候就在想,如果使用jQuery的封裝的ajax方法來獲取資料是否可行。
第一次的時候是按照如下樣子寫的:
angular.module('myApp',[]).controller('myController',function($scope,$http){ // $http.get('JSON物件資料.json').then(function(response) { // $scope.persons = response.data.person; // console.log(response.data.person); // }); $.ajax({ type:"get", url:"JSON物件資料.json", dataType:"json", async:true, success:function(response) { $scope.persons = response.person; } }); });
然後就發現$scope.persons的值確實是放進去了,但是在頁面中卻沒有顯示出來。
在百度中查詢的時候才知道是因為Angular的雙向繫結在和第三方類庫混用的時候會失效,所以還要在最後使用$scope.$apply();再進行一次繫結。
實際有效程式碼如下:
angular.module('myApp',[]).controller('myController',function($scope,$http){ // $http.get('JSON物件資料.json').then(function(response) { // $scope.persons = response.data.person; // console.log(response.data.person); // }); $.ajax({ type:"get", url:"JSON物件資料.json", dataType:"json", async:true, success:function(response) { $scope.persons = response.person; $scope.$apply(); } }); });