1. 程式人生 > >AngularJS中使用$.ajax繫結失敗的處理方法

AngularJS中使用$.ajax繫結失敗的處理方法

使用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();
					}
				});
			});