0

我已经尝试搜索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>

谢谢你。

4

1 回答 1

8

问题是您的代码是在“AngularJS 世界”之外执行的。确切地说，任何应该触发 2-way 数据绑定的外部事件都应该触发 AngularJS $digest 循环。有关更多信息，请参阅http://docs.angularjs.org/guide/concepts。

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

  1. 放弃 jQuery ajax 以支持 AngularJS$http服务。这是一个首选的解决方案，它更容易和更好：从 jquery $.ajax 到 angular $http

  2. 将您的调用包装在$scope.$apply方法中以在 jQuery 调用完成时触发 $digest 循环

但实际上，放开 jQuery...

于 2013-05-03T17:43:55.267 回答