AngularJS在控制器之间共享数据。

10 浏览
0 Comments

AngularJS在控制器之间共享数据。

我有一个服务，从我的服务器获取一些客户端数据：

app.factory('clientDataService', function ($http) {

var clientDataObject = {};

var cdsService = {

fetch: function (cid) {

//$http返回一个promise，它有一个then函数，该函数也返回一个promise

var promise = $http.get('/clients/stats/' + cid + '/').then(function (response) {

// 这里的then函数是修改响应的机会

console.log(response);

// 返回值被控制器中的then函数接收

clientDataObject = {'data': response.data, 'currentClientID': cid};

return clientDataObject;

});

// 将promise返回给控制器

return promise;

}

};

return cdsService;

});

然后在一个控制器中，我这样做：

//获取统计数据

clientDataService.fetch($scope.id).then(function (response) {

$scope.client_data = {

'statistics': response.data

}

});

这一切都很好。然而，我正在尝试在另一个控制器上使用该服务进行监视，以在数据发生更改时更新其作用域，而不是重新启动http请求：

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

alert(cid);

});

我现在只是弹出警告，但它从不触发。当页面最初加载时，它警告“undefined”。控制台中没有错误，所有的$inject都没问题，但它似乎从不认识服务中的数据已经发生了变化。我在监视中做错了什么吗？

非常感谢

Ben

0

2 答案

0 Comments

问题的出现原因：在AngularJS中，不同的控制器之间默认是不能直接共享数据的。这可能会导致在一个控制器中获取到的数据，在另一个控制器中无法访问到。

解决方法：创建一个新的服务，在不同的控制器中使用该服务来存储和访问数据。

首先，在应用程序中定义一个新的服务，命名为DataSharingObject。该服务可以使用AngularJS的factory方法来创建，并返回一个空的对象，用于存储数据。

app.factory('DataSharingObject', function(){
   return {};
});

接下来，在需要存储数据的控制器中，将DataSharingObject服务包含进来，并通过该服务将数据存储到sharedata属性中。

app.factory('clientDataService', function ($http, DataSharingObject) {
    DataSharingObject.sharedata = ..在这里赋值数据
});

最后，在需要访问数据的控制器中，同样将DataSharingObject服务包含进来，并通过该服务访问sharedata属性获取存储的数据。

app.factory('clientReceivingService', function ($http, DataSharingObject) {
   ..在这里使用数据... = DataSharingObject.sharedata
});

通过以上步骤，我们可以在不同的控制器中共享数据。在需要存储数据的控制器中，将数据存储到DataSharingObject服务的sharedata属性中；在需要访问数据的控制器中，通过DataSharingObject服务的sharedata属性获取存储的数据。这样就实现了数据在不同控制器之间的共享。

0
0 Comments

AngularJS是一个流行的JavaScript框架，用于构建Web应用程序。在AngularJS中，有时需要在不同的控制器之间共享数据。这篇文章将介绍一个AngularJS共享数据的问题以及解决方法。

问题的原因是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) {
                // 在这里可以修改响应数据
                console.log(response);
                // 返回值会被控制器中的then函数接收
                clientDataObject = {'data': response.data, 'currentClientID': cid};
                $rootScope.$broadcast('UPDATE_CLIENT_DATA', clientDataObject);
                return clientDataObject;
            });
            // 将promise返回给控制器
            return promise;
        }
    };
    return cdsService;
});

然后，在控制器中可以使用以下代码监听更改：

$scope.$on('UPDATE_CLIENT_DATA', function (event, clientDataObject) {
    // 在这里处理更改
});

通过将$rootScope注入到服务中，并使用$rootScope.$broadcast方法广播更改，我们可以在控制器中监听这些更改。这样，我们就可以在不同的控制器之间共享数据，并在数据发生变化时进行相应处理。

0