通过Angular中的服务在2个控制器之间传递一个var？答案

【问题标题】：Passing a var between 2 controllers via a service in Angular?通过Angular中的服务在2个控制器之间传递一个var？
【发布时间】：2015-07-03 16:31:38
【问题描述】：

我有 2 个控制器，如下所示：

.controller('DashCtrl', function($scope, GCs, GCDetails ) {
    $scope.getData = function(id)
    {
        GCs.get(id)
        .success(function(data){
            console.log(data); // it is getting the data correctly here.

            // I want to pass the data to 'GCDetailCtrl' controller
            GCDetails = data;
        });
    };
})

.controller('GCDetailCtrl', function($scope, GCs) {
     console.log(GCDetails); // I am getting an empty object
     $scope.itemDetails = GCDetails; //nothing in it
})

我尝试了很多方法，在stackoverflow上看到了很多线程，但我不知道是什么问题。

我的服务如下：

.service('GCDetails', function () {
    return {};
});

我觉得我的服务是错误的，因为我总是返回一个空对象。请问有什么帮助吗？谢谢。

【问题讨论】：

标签： angularjs

【解决方案1】：

您的服务必须先设置对象，然后再尝试获取更新的对象。

所以它应该看起来像这样

.service('GCDetails', function(){
  var self = this;
  self.myObject = {};

  self.setObject = function (val) {
    self.myObject = val;
  };

  self.getObject = function() {
    return self.myObject;
  };
});

为什么我把这个分配给自己？为避免冲突，当您调用 getObject 或 setObject 时，它不知道您调用的是哪个 self。

【讨论】：

我没有更改控制器中的任何内容。我刚刚按照您的建议更改了服务
我不知道你想做什么，但这是工作小提琴jsfiddle.net/cjs5nu3o/1

【解决方案2】：

您没有在服务中分配价值。您需要将ajax 响应存储在服务中，然后在另一个控制器中调用它。按以下方式进行

.controller('DashCtrl', function($scope, GCs, GCDetails ) {
    $scope.getData = function(id)
    {
        GCs.get(id)
        .then(function(data){
            console.log(data); // it is getting the data correctly here.

            // I want to pass the data to 'GCDetailCtrl' controller
            GCDetails.myObject = data; // assign data in service's object
        });
    };
})

你的服务应该是

.service('GCDetails', function () {
    this.myObject = {};
    var self = this; 
    this.callAFunction = function() {
       return self.myObject ;
    };
 });

并在您想要的地方使用此服务的对象，如下所示

.controller('GCDetailCtrl', function($scope, GCs, GCDetails) {
     $scope.itemDetails = GCDetails.callAFunction();
     console.log($scope.itemDetails); //You will get the data
})

【讨论】：

我得到一个空对象{}
你确定你在获取请求中获取数据
当然.. console.log 显示有一个 json 数组
我想我知道原因..当你尝试 console.log(data) 和 console.log($scope.GCDetails.myObject).. 它给你一个空对象然后保存数据的对象
GCs是通过$http调用get方法请求的工厂

【解决方案3】：

从控制器进行 http 调用不是一个好习惯。您可以通过 http 调用使服务返回一个函数。我的建议是：

app.factory('GCdetails', function($http){
    return {
        data:{},
        setData:function(data){
          this.data=data;
        },
        get : function(params){
            return $http.get(id, {
                params : params
            });
        }
    }
});

现在从控制器更新数据：

app.controller('DashCtrl',function($scope,GCdetails){
    GCdetails.get().success(function(data){
      GCdetails.setData(data);
    });
});

app.controller('GCdetailsController',function($scope,GCdetails){
    $scope.itemDetails=GCdetails.data;
});

我希望这会有所帮助。

【讨论】：

【解决方案4】：

这应该可行，而且我总是使用服务来传递数据：

.service('GCDetails', function() {

  var myObj = {};

  this.setObject = function (val) {
    myObj = val;
  };

  this.getObject = function() {
    return myObj;
  };
});

在你的控制器中确保你从你的控制器调用GCDetails.setObject(yourvalue)，这样当你调用GCDetails.getObject()时它实际上有一个值。

【讨论】：

@Riad 确保在尝试获取数据之前实际从控制器设置了一个值。