Angular:在控制器之间共享异步服务数据 [英] Angular: share asynchronous service data between controllers

问题描述

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

我知道这可能有点令人困惑，但我希望有些事情是可能的.

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

HTML:

<div ng-controller="ControllerA">ControllerA.message = {{message.hello}}
<input type="text" ng-model="message.hello"/>
<小时/><div ng-controller="ControllerB">ControllerB.message = {{message.hello}}
<input type="text" ng-model="message.hello"/>

JS:

angular.module('myApp', []).factory('myService', function($q, $timeout) {变量消息 = {你好:'你好世界'};返回 {获取消息:函数(){回消息；}};})函数 ControllerA($scope, myService) {$scope.message = myService.getMessage();}函数 ControllerB($scope, myService) {$scope.message = myService.getMessage();}

<小时>

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

问题是我想避免使用 "$broadcast"/"$on" 或在 $rootScope 中共享对象.

HTML:

<div ng-controller="ControllerA">ControllerA.message = {{message.hello}}
<input type="text" ng-model="message.hello"/>
<小时/><div ng-controller="ControllerB">ControllerB.message = {{message.hello}}
<input type="text" ng-model="message.hello"/>

JS:

angular.module('myApp', []).factory('myService', function($q, $timeout) {var 消息 = {};返回 {获取消息:函数(){var deferred = $q.defer();$超时(功能(){message.hello = '世界你好！';deferred.resolve(message);}, 2000);返回 deferred.promise;}};})函数 ControllerA($scope, myService) {$scope.message = myService.getMessage();}函数 ControllerB($scope, myService) {$scope.message = myService.getMessage();}

感谢您的帮助.

维克多

解决方案

您返回的是 factory 的返回对象中的 promise 而不是实际的对象本身.所以在你的范围内，你应该等待承诺修改一个具体的对象，然后将它分配给 $scope.message

示例:

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

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

I would like to "bind the change" of asynchronous data between controllers.

I know it's a probably a bit confusing but I hope something is possible.

In the following example, if I write something in an input, it works great: 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();
}

---

But let's say I grab my data from a server. I would like to "link" the data like in the previous example. http://jsfiddle.net/Victa/j3KJj/

The thing is that I would like to avoid using "$broadcast"/"$on" or sharing the object in the $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();
}

Thanks for your help.

Victor

解决方案

you are returning a promise in the factory's return object and not the actual object itself. so in you scope you should actually wait for the promise to mend a concrete object then assign it to $scope.message

example:

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

i changed your fiddle into something that might be your answer, see this fiddle

这篇关于Angular:在控制器之间共享异步服务数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！