Angular:在控制器之间共享异步服务数据

Angular: share asynchronous service data between controllers

本文关键字：异步 服务 数据 共享 之间 控制器 Angular      更新时间：2023-09-26

我想在控制器之间"绑定更改"异步数据。

我知道这可能有点令人困惑，但我希望有可能。

在下面的例子中，如果我在输入中写一些东西，效果会很好：http://jsfiddle.net/Victa/9NRS9/

HTML：

<div ng-app="myApp">
    <div ng-controller="ControllerA">
        ControllerA.message = {{message.hello}}<br/>
        <input type="text" ng-model="message.hello"/>
    </div>
    <hr/>
    <div ng-controller="ControllerB">
        ControllerB.message = {{message.hello}}<br/>
        <input type="text" ng-model="message.hello"/>       
    </div>
</div>

JS：

angular.module('myApp', [])
    .factory('myService', function($q, $timeout) {
        var message = {
            hello: 'hello world'
        };
        return {
            getMessage : function(){
                return message;
            }
       };
    })
function ControllerA($scope, myService) {
    $scope.message = myService.getMessage();
}
function ControllerB($scope, myService) {
    $scope.message = myService.getMessage();
}

但假设我从服务器上获取数据。我想像前面的例子一样"链接"数据。http://jsfiddle.net/Victa/j3KJj/

问题是，我希望避免使用"$broadcast"/"$on"或在$rootScope中共享对象。

HTML：

<div ng-app="myApp">
    <div ng-controller="ControllerA">
        ControllerA.message = {{message.hello}}<br/>
        <input type="text" ng-model="message.hello"/>
    </div>
    <hr/>
    <div ng-controller="ControllerB">
        ControllerB.message = {{message.hello}}<br/>
        <input type="text" ng-model="message.hello"/>       
    </div>
</div>

JS：

angular.module('myApp', [])
    .factory('myService', function($q, $timeout) {
        var message = {};
        return {
            getMessage : function(){
                var deferred = $q.defer();
                $timeout(function() {
                    message.hello = 'Hello world!';
                    deferred.resolve(message);
                }, 2000);
                return deferred.promise;  
            }
       };
    })
function ControllerA($scope, myService) {
    $scope.message = myService.getMessage();
}
function ControllerB($scope, myService) {
    $scope.message = myService.getMessage();
}

谢谢你的帮助。

Victor

在factory的返回对象中返回promise，而不是实际对象本身。因此，在您的范围内，您实际上应该等待修复具体对象的承诺，然后将其分配给$scope.message

示例：

function ControllerA($scope, myService) {
     myService.getMessage().then(function(obj){
              $scope.message=obj
             });
}

我把你的小提琴换成了可能是你答案的东西，看看这个小提琴

相关文章：