Question

我已经试图搜索anwser ......我被卡住了。

我尝试在控制器之间进行通信（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

<script type='text/javascript' src="http://code.angularjs.org/angular-1.0.0rc9.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<body ng-app="myModule">

    <div ng-controller="Controller">
        <button ng-click="handleClick();">read json</button>
    </div>

    <div ng-controller="ControllerOne">
        <input ng-model="message" >
    </div>

    <div ng-controller="ControllerTwo">
        <input ng-model="message" >
    </div>

谢谢。

Answer 1

问题是您的代码是在“AngularJS world”之外执行的。确切地说，任何应该触发双向数据绑定的外部事件都应该触发AngularJS $ digest循环。有关详情，请参阅http://docs.angularjs.org/guide/concepts。

现在，回到你的特定问题，你有两个解决方案：

删除jQuery ajax以支持AngularJS $http服务。这是一个首选的解决方案，它更容易，更好：from jquery $.ajax to angular $http
在$scope.$apply方法中包含您的调用，以在jQuery调用完成时触发$ digest循环

但实际上，放开jQuery ......

AngularJS，jQuery ajax请求，总是要求（单击）两次

1 个答案: