当前位置: 首页 > 面试题库 >

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

澹台权
2023-03-14
问题内容

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

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

在以下示例中,如果我在输入中编写内容,则效果很好: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();
}

谢谢你的帮助。

胜利者


问题答案:

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

例:

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

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



 类似资料:
  • 问题内容: 我试图让两个不同的控制器互相通信。 控制器1 该控制器旨在从文本字段中获取文本(使用ng-model =’email’),并将文本放入服务(emailService)中,以便可以在下一个ng- view(由下一个ng-view控制)中使用控制器) //出于测试目的,我只是将“ Hi”直接放入saveEmail函数中 控制器2 为了进行有目的的测试,我使用window.alert显示ge

  • 问题内容: 我有一项从服务器中获取一些客户端数据的服务: 然后在一个控制器中执行: 一切都很好。但是,我正在尝试从该服务上的另一个控制器进行监视,以在数据更改时更新其范围,而不是必须重新启动http请求: 我现在只是提醒,但从未触发过。页面最初加载时,它会发出“未定义”警报。我在控制台中没有任何错误,并且所有$ injects都很好,但是似乎从未意识到服务中的数据已更改。我在手表上做错了吗? 非常

  • 问题内容: 我正在尝试在控制器之间共享数据。用例是一个多步骤的表单,在一个输入中输入的数据以后会在原始控制器之外的多个显示位置中使用。下面和jsfiddle中的代码。 的HTML JS 任何帮助是极大的赞赏。 问题答案: 一个简单的解决方案是让您的工厂返回一个对象,并让您的控制器使用对同一对象的引用: JS: HTML: 演示: http : //jsfiddle.net/HEdJF/ 当应用程序

  • 问题内容: 我正在尝试在控制器之间共享数据。用例是一个多步骤的表单,在一个输入中输入的数据以后会在原始控制器之外的多个显示位置中使用。下面和jsfiddle中的代码。 HTML JS 问题答案: 一个简单的解决方案是让您的工厂返回一个对象,并让您的控制器使用对同一对象的引用: JS: HTML: 当应用程序变得更大,更复杂且难以测试时,您可能不希望以这种方式从工厂公开整个对象,而是例如通过gett

  • 问题内容: 我想知道什么是在控制器之间共享指令的好方法。我有两个指令要在具有不同配置的不同控制器中使用,首先想到的是我想到的使用方法: 这样,我可以使用子控制器中的所有功能,但是由于碰撞问题,我不太喜欢。由于您不能使用服务(不能在服务中使用$ scope),其他选择可以是其他指令或将代码放入运行块,但使用父控制器则完全相同,因此您怎么看? ? 更新 您如何看待这种方法? RIUPDATE这似乎是最

  • 问题内容: 有没有办法在AngularJS中的服务之间共享数据? 用例:来自不同服务的数据聚合 例如,我想要一个service1从REST服务加载一些数据。然后,另一个service2将来自另一个REST API的其他数据添加到service1数据中,以创建数据聚合服务。 我基本上是想根据它们使用的API来分离服务,但是仍然有一个服务来最终保存所有数据。 问题答案: 创建使用延迟库的第三项服务,以