AngularJS中使用$.ajax绑定失败的处理方法

最新推荐文章于 2021-08-06 14:36:16 发布

天使不见时

最新推荐文章于 2021-08-06 14:36:16 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： jquery angularjs ajax json

本文链接：https://blog.youkuaiyun.com/qq_37851291/article/details/78111205

前端技术专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在AngularJS应用中使用jQuery的AJAX方法获取数据时遇到的问题及解决办法。由于AngularJS的双向绑定特性，在混用第三方库时需要手动触发$scope.$apply()以确保视图更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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