AngularJS,jQuery ajax请求,总是需要请求(点击)两次。

26 浏览
0 Comments

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




        
        
        

谢谢。

0
0 Comments

问题的原因是代码在"AngularJS世界"之外执行。确切地说,任何外部事件都应该触发AngularJS的双向数据绑定,从而触发AngularJS的$digest循环。详细信息请参见http://docs.angularjs.org/guide/concepts

现在,回到您的特定问题上,有两个解决方案:

  1. 放弃jQuery ajax,改用AngularJS的$http服务。这是首选解决方案,更容易和更好用:从jquery $.ajax转换为angular $http
  2. 在jQuery调用完成后,将调用包装在$scope.$apply方法中,以触发$digest循环。

但是,真的,只需放弃jQuery吧...

0