Question

我在angularjs中有两个控制器。如果一个控制器改变数据，其他控制器显示更新数实际上第一个控制器有一个事件，它发生在第二个控制器显示它。为此我建议我写一个服务。这项服务有两个功能。这是我的服务代码。

app.service('sharedData', function ($http) {
var data=[]
return {
    setData: function () {
        $http.get('/getData').success(function(response){
            data = response;
        })
    },
    getData: function(){
        return data;
    }
}

}）;

第一个控制器中的

app.controller("FirstController", function ($scope, $http,sharedData)  
  {    
     $scope.handleGesture = function ($event)
      {  
        sharedData.setData();
     };

}）;

在第二个控制器中：

app.controller("SecondController", function ($scope,sharedData) {
    var data=[];
    data = sharedData.getData();
}

）;

在第一个控制器setData中解决任何问题但在第二个控制器中无法正常工作。如何在两个控制器之间动态共享数据？

Answer 1

您有多个语法问题，例如服务名称是SharedData，并且您将其用作SharedDataRange，该服务将在get函数之前返回。

我所做的是纠正所有语法错误并编译成一个plunkr让你看看。只需查看控制台，我就可以获得之前在setter中设置的数据数组。

使用Javascript：

var app = angular.module('plunker', []);

app.controller("FirstController", function ($scope,sharedDateRange)  
  {    
        sharedDateRange.setData();
  });

     app.controller("SecondController", function ($scope,sharedDateRange) {
    var data=[];
    data = sharedDateRange.getData();
    console.log(data);
});


app.service('sharedDateRange', function ($http) {
var data=[];
return {
    setData: function () {
            data = ['1','2','3'];
        }
    ,
    getData: function(){
        return data;
    }
}
});

Working Example

如果你想将sharedDataRange作为变量名称和服务名称保存为sharedData，请查看此example

的javascript：

var app = angular.module('plunker', []);


app.controller("FirstController", ['$scope','sharedData', function ($scope,sharedDateRange)  
  {    
        sharedDateRange.setData();
  }]);

     app.controller("SecondController", ['$scope','sharedData', function ($scope,sharedDateRange) {
    var data=[];
    data = sharedDateRange.getData();
    console.log(data);
}]);


app.service('sharedData', function ($http) {
var data=[];
return {
    setData: function () {
            data = ['1','2','3'];
        }
    ,
    getData: function(){
        return data;
    }
}
});

Answer 2

您可以将服务上的数据对象绑定到第二个控制器。

app.service('sharedData', function ($http) {
  var ret = {
    data: [],
    setData: function () {
        $http.get('/getData').success(function(response){
            data = response;
        });
    }
  };
  return ret;
});

app.controller("FirstController", function ($scope, sharedData) {
  $scope.handleGesture = function () {
    sharedData.setData();
  };
});

app.controller("SecondController", function ($scope, sharedData) {
  $scope.data = sharedData.data;
});

Answer 3

您正试图在控制器之间共享数据，但是您缺少一些关键点。问题是当app运行时，SecondController会被加载，因此它调用sharedData.getData（），即使firstController中的setData调用尚未发生。因此，当您调用sharedData.getData（）时，您将始终获得一个空数组。要解决此问题，您必须使用promises来告诉您服务何时可用数据。修改您的服务，如下所示：

app.service('sharedData', function ($http, $q) {
    var data=[];
    var deferred = $q.defer();
    return {
        setData: function () {
            $http.get('/getData').success(function(response){
                data = response;
                deferred.resolve(response);
            })
        },
        init: function(){
            return deferred.promise;
        },
        data: data
    }
})

第二个控制器是这样的：

app.controller("SecondController", function ($scope,sharedData) {
    var data=[];
    sharedData.init().then(function() {
        data = sharedData.data;
    });
});

有关承诺的更多信息，https://docs.angularjs.org/api/ng/service/ $ q

Answer 4

你需要的是一个单身人士。服务sharedData需要是单个实例，优选地是具有静态数据成员的静态对象。这样您就可以在不同控制器之间共享数据。这是修改后的版本

var app = angular.module('app', []);

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

var sharedData = function()
{
    this.data = [];   
}

sharedData.setData = function()
{
    //$http.get('/getData').success(function(response){
        this.data = "dummy";
    //})        
}

sharedData.getData = function()
{
    return this.data;   
}

return sharedData;
})
.controller("FirstController", function ($scope, $http,sharedData)  
  {
    sharedData.setData();
  })
.controller("SecondController", function ($scope,sharedData) {
    $scope.data=sharedData.getData();
});

我已删除了要测试的事件，并暂时删除了$ http get。您可以查看此链接以获得有效的演示：

http://jsfiddle.net/p8zzuju9/

动态地在AngularJS中的控制器之间传递数据

4 个答案: