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

AngularJS在控制器之间共享数据

扈俊健
2023-03-14
问题内容

我有一项从服务器中获取一些客户端数据的服务:

app.factory('clientDataService', function ($http) {
    var clientDataObject = {};
    var cdsService = {
        fetch: function (cid) {
            //$http returns a promise, which has a then function, which also returns a promise
            var promise = $http.get('/clients/stats/' + cid + '/').then(function (response) {
                // The then function here is an opportunity to modify the response
                console.log(response);
                // The return value gets picked up by the then in the controller.
                clientDataObject = {'data': response.data, 'currentClientID': cid};
                return clientDataObject;
            });
            // Return the promise to the controller
            return promise;
        }
    };
    return cdsService;
});

然后在一个控制器中执行

//get stats
clientDataService.fetch($scope.id).then(function (response) {
    $scope.client_data = {
        'statistics': response.data
    }
});

一切都很好。但是,我正在尝试从该服务上的另一个控制器进行监视,以在数据更改时更新其范围,而不是必须重新启动http请求:

$scope.$watch('clientDataService.clientDataObject', function (cid) {
    alert(cid);
});

我现在只是提醒,但从未触发过。页面最初加载时,它会发出“未定义”警报。我在控制台中没有任何错误,并且所有$
injects都很好,但是似乎从未意识到服务中的数据已更改。我在手表上做错了吗?

非常感谢本


问题答案:

clientDataService.clientDataObject不在控制器范围内,因此您无法监视该对象的更改。您需要将$
rootScope注入服务中,然后将更改广播到控制器作用域。

app.factory('clientDataService', function ($rootScope, $http) {
    var clientDataObject = {};
    var cdsService = {
        fetch: function (cid) {
            var promise = $http.get('/clients/stats/' + cid + '/').then(function (response) {
                // The then function here is an opportunity to modify the response
                console.log(response);
                // The return value gets picked up by the then in the controller.
                clientDataObject = {'data': response.data, 'currentClientID': cid};
                $rootScope.$broadcast('UPDATE_CLIENT_DATA', clientDataObject);
                return clientDataObject;
            });
            // Return the promise to the controller
            return promise;
        }
    };
    return cdsService;
});

然后在控制器中,您可以使用以下命令监听更改:

$scope.$on('UPDATE_CLIENT_DATA', function ( event, clientDataObject ) { });


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

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

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

  • 问题内容: 我正在阅读有关Angular验证的文章,并认为在我自己的项目中使用它会很好。它运行得非常好,我想在成功验证表单后在其他控制器中扩展它的访问方法。我尝试了各种方法来执行此操作,但似乎看不到$ scope对象中的方法。 我希望有人能告诉我我想念的东西才能完成这项工作。我叉了个笨蛋。 问题答案: 正确的方法是使用角度服务。例如: 这样,您可以在注入到的任何控制器中访问内部功能: 看到这个演示

  • 本文向大家介绍AngularJS控制器之间的数据共享及通信详解,包括了AngularJS控制器之间的数据共享及通信详解的使用技巧和注意事项,需要的朋友参考一下 AngularJS 本身已经提供了像指令 Directive 和 服务 Service 一类的方式,来实现数据和代码的共享和复用,但在实际的项目开发中,或许是处于懒惰,亦或是为了便利,总会想在两个控制器之间,直接进行数据的共享通信,或者是函

  • 问题内容: 我创建了一个包装jQuery插件的指令,并将该插件的配置对象从控制器传递到指令。(作品) 在配置对象中是一个我想在事件上调用的回调。(作品) 在回调中,我想修改控制器的$ scope上的属性,该属性 不起作用 。Angular无法识别出该属性由于某种原因而发生了变化,这使我相信回调中的$ scope与控制器的$ scope不同。我的问题是我不明白为什么。 有人能指出我正确的方向吗? 单