AngularJS,jQuery ajax请求,总是需要请求(点击)两次。
AngularJS,jQuery ajax请求,总是需要请求(点击)两次。
我已经尝试搜索答案...但我卡住了。
我尝试在控制器之间进行通信(http://onehungrymind.com/angularjs-communicating-between-controllers/)。
这对我来说很好用。
在下一步中,我尝试添加一个AJAX请求,其结果应发送给控制器。
这个请求已经完成了它的工作,但不幸的是只有每隔第二个请求才能成功。
AJAX请求
var request = $.post("http://www.mydomain.com/search.php", { data: "" }); request.done(function( data ) { sharedService.prepForBroadcast(data); }); };
这是怎么回事?
JAVASCRIPT
var myModule = angular.module('myModule', []); myModule.factory('mySharedService', function($rootScope) { var sharedService = {}; sharedService.message = ''; sharedService.prepForBroadcast = function(msg) { this.message = msg; this.broadcastItem(); }; sharedService.broadcastItem = function() { $rootScope.$broadcast('handleBroadcast'); }; return sharedService; }); function Controller($scope, sharedService) { $scope.handleClick = function() { var request = $.post("http://www.mydomain.com/search.php", { data: "" }); request.done(function( data ) { sharedService.prepForBroadcast(data); }); }; $scope.$on('handleBroadcast', function() { $scope.message = 'zero: ' + sharedService.message; }); } function ControllerOne($scope, sharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'ONE: ' + sharedService.message; }); } function ControllerTwo($scope, sharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'TWO: ' + sharedService.message; }); } Controller.$inject = ['$scope', 'mySharedService']; ControllerOne.$inject = ['$scope', 'mySharedService']; ControllerTwo.$inject = ['$scope', 'mySharedService'];
HTML
谢谢。
问题的原因是代码在"AngularJS世界"之外执行。确切地说,任何外部事件都应该触发AngularJS的双向数据绑定,从而触发AngularJS的$digest循环。详细信息请参见http://docs.angularjs.org/guide/concepts。
现在,回到您的特定问题上,有两个解决方案:
- 放弃jQuery ajax,改用AngularJS的
$http
服务。这是首选解决方案,更容易和更好用:从jquery $.ajax转换为angular $http - 在jQuery调用完成后,将调用包装在
$scope.$apply
方法中,以触发$digest循环。
但是,真的,只需放弃jQuery吧...